Question

I’ve a list with each li containing a remove button to remove it upon click. I’m not sure why but the button is only able to apply to the first item in the list but not for the rest of the li boxes. Wonder where i’ve gone wrong.

The following is my php code script and javascript

foreach($biz_watchlist as $biz_watchlist1){
  echo '<li class="biz_watch">';
  echo '<table style="width:100%">';
  echo '<td style="width:50%">';
  echo $biz_watch_details['5'];
  echo ' | <a id="remove_watch">remove</a>';
  echo '</td>';
  echo '<td>';
  echo '<span style="float:right">'.$biz_watch_details['19'].'</span>';
  echo '</td>';
  echo '</table>';
  echo '</li>';
}

  <script type="text/javascript">
  $(document).ready(function(){
     $('#remove_watch').click(function(){
      $(this).closest('.biz_watch').fadeOut("slow");
     });
  });
  </script>

Answer 1

$('#remove_watch') is searching for ID. that is why you only get results for the first object.
id should be unique. if you want it in multi places change it to class instead.

 echo ' | <a id="remove_watch">remove</a>';

should be

 echo ' | <a class="remove_watch">remove</a>';

and then

$('.remove_watch').click(function(){