title: jQuery delete ID from element with ajax of a database and refresh
body: <p>Hello at the moment i'm trying to use jQuery in order to get ids of multiple fields with ajax and send the data to remove it via php.
  So far i was able to delete the item but i can't remove other ids so for and example:</p>
  
  <p>i have a for loop what will get the information off the database as:</p>
  
  <pre><code> for($i=0; $i &lt; $data; $i++) {
      echo "
      &lt;div class='list-item' data-action='delete' id='".$Data[$i]['ID']."'&gt;
      &lt;a class='title link' href='".$Data[$i]['URL']."' target='_blank'&gt;".$Data[$i]['name']."&lt;/a&gt;
      &lt;span class='checkbox' id='".$Data[$i]['ID']."' value='".$Data[$i]['ID']."'&gt;&lt;/span&gt;
      &lt;div class='thumb'&gt;                             
      &lt;img src='".$Data[$i]['thumb']."' alt='' width='110' height='99'&gt;                               
      &lt;span class='attr'&gt;".$Data[$i]['width'].'x'.$Data[$i]['height']."&lt;/span&gt;                                
      &lt;span class='size'&gt;".$Data[$i]['size']."&lt;/span&gt;                         
      &lt;/div&gt;                          
      &lt;div class='date'&gt;".$Data[$i]['Date']."&lt;/div&gt;                     
      &lt;/div&gt;
      ";
    }
  </code></pre>
  
  <p>notice how you see the $Data[$i]['ID'] with that it'll print out :</p>
  
  <pre><code>&lt;div class="list-item" data-action="delete" id="89"&gt;
  &lt;a class="title link" href="http://URL" target="_blank"&gt;NAME&lt;/a&gt;
  &lt;span class="checkbox" id="89" value="89"&gt;&lt;/span&gt;
  &lt;div class="thumb"&gt;
  &lt;img src="thumb.png" alt="" width="110" height="99"&gt;
  &lt;span class="attr"&gt;100x100&lt;/span&gt;
  &lt;span class="size"&gt;85.2 KB&lt;/span&gt;&lt;/div&gt;
  &lt;div class="date"&gt;2012-06-11 01:25:20&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="list-item" data-action="delete" id="90"&gt;
  &lt;a class="title link" href="http://URL" target="_blank"&gt;NAME&lt;/a&gt;
  &lt;span class="checkbox" id="90" value="90"&gt;&lt;/span&gt;
  &lt;div class="thumb"&gt;
  &lt;img src="thumb.png" alt="" width="110" height="99"&gt;
  &lt;span class="attr"&gt;100x100&lt;/span&gt;
  &lt;span class="size"&gt;85.2 KB&lt;/span&gt;&lt;/div&gt;
  &lt;div class="date"&gt;2012-06-11 01:25:20&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so with that i'm using jQuery to add a class to both class="checkbox" and class="list-item" with <code>selected</code> so that when the event of click or .on('click' function, it will do a confirm window saying "Are you sure you want to remove?" if ok then grab the id of the elements for each and post the data with ajax to have the item removed instantly!
  The thing is i need it to work upon multiple ids and have it not add the class of <code>selected</code> to all of class="checkbox" and class="list-item" need it to be specific as in, i choose the items of the ids with 84,94,99,&amp; 100 if i do that everything that is selected should have that class of <code>selected</code> not every id</p>
  
  <p>here is my attempt trying to get this to work </p>
  
  <pre><code>&lt;script&gt;
  $(function (){
  $('.list-item').on('click', function(e) {
  $(this).addClass("selected");
  if(window.confirm('Are you sure you want to remove?')) {
  id = $(this).attr("id");
          //alert(id);
          $.ajax({
              type: 'post',
              url: 'something.php?action=delete&amp;id='+id,
              dataType: 'json',
              data: {
  
              }, success: function(data) {
                  if(data.error === true)
                      {
                          $.errRorBar({ bdS: "error", html: data.message , delay: 5000 });
                      }
                      else
                      { 
                      $.errRorBar({ bdS: "success", html: data.message , delay: 5000});
                      }
              }, error: function(XMLHttpRequest, textStatus, errorThrown) {
                  $.errRorBar({ bdS: "error", html: "Opps! Something went wrong!" , delay: 5000 });
  
                  console.log(XMLHttpRequest);
                  console.log(textStatus);
                  console.log(errorThrown);
  
                  // console.log(XMLHttpRequest.responseText);
              }
  
          });
          return false;
    }
  });
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p>So how can i do this and how can i make the refresh to update the list making it hide or remove it or something?
  At the moment, it will remove the item from the database but only one time for the one item i selected even if i have multiple items chosen,i'll get a return of "fail to remove"</p>
  
  <p>Anyone here can help me out?
  i think i'm missing something but hopefully this was a good explanation of my situation 
  Thanks</p>