Question

When I click on a particular div, that div should fade out, simple, but when I click on one of the divs it deletes the div on top of the stack, i.e. when I click #sel6 it removes sel5

HTML code

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

<div id="sel5" class="sel">something</div>
<div id="sel6" class="sel">something</div>
<div id="sel7" class="sel">something</div>

</div>

jQuery code
sel_id, sel_1 are variables

$('.selc_d').bind('click',function(){ 
  var sel_id = $('.sel').attr('id');
  alert(sel_id);

  $('#'+sel_id).fadeOut('slow');
  $('#'+sel_id).remove();
  $('.search_box').append(sel_1);
});

Answer 1

$('.sel').bind('click',function(){
    var sel_id = this.id; // replace this line using this.id or $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});

Note the use of this… this will contain the element that is clicked.

What you were doing was

var sel_id = $('.sel').attr('id'); 

Which will always select the first div with class sel in this case the div with id sel5

##WHAT YOU WANT##

<div id="selc_d" class="selc" style="position:absolute; left:15px; top:200px; width:260px;">

    <div id="sel5" class="sel">something</div>
    <div id="sel6" class="sel">something</div>
    <div id="sel7" class="sel">something</div>

</div>

$('.sel').bind('click',function(){
    var sel_id = $(this).attr('id');
    alert(sel_id);
    $('#'+sel_id).fadeOut('slow');
    $('#'+sel_id).remove();
    $('.search_box').append(sel_1);
});