Jquery Селектор для динамически создаваемых элементов

Question

я создаю HTML в PHP, как здесь

<?php 
while(){ 
    ?> 
<a id="click_to_expand-1" class="btn btn-default btn-sm "> more</a> 
<div id="expand_content-1" class="row extra-detail-gist" style="display: none;"> 
     <ul class="extra-feature-gist"> 
      <li> 
      <p><strong>Baths :</strong><span class="text-success"> <?php echo $rw["baths"]; ?></span></p> 
      </li> 
     </ul> 
<?php 
} 
?> 

Вот мой Jquery код

$(function(){ 
     $('.row.extra-detail-gist').css('display','none'); 
     $('.btn.btn-default.btn-sm').click(function(){ 
      $('.row.extra-detail-gist').slideToggle('slow'); 
      $(this).toggleClass('slideSign'); 
      return false; 
     }); 
    }); 

Этот код применяется для всех Див созданы и все дивы показываются при щелчке . Как я могу различаться для каждого нажатия на «больше»?

ОБНОВЛЕНО: Этот код работает для первого один properly..but остальных записей не работает

$(function(){ 
     $('#expand_content-1').css('display','none'); 
     $('#click_to_expand-1').click(function(){ 
      $('#expand_content-1').slideToggle('slow'); 
      $(this).toggleClass('slideSign'); 
      return false; 
     }); 
}); 

Вот JSFIDDLE

Answer 1

Попробуйте это:

Рабочих Example

$(document).on('click','.btn.btn-default.btn-sm',function(){ 
    $(this).parent().next('.row.extra-detail-gist').slideToggle('slow'); 
    $(this).toggleClass('slideSign'); 
    return false; 
}); 

С этой строкой $('.row.extra-detail-gist') вы выбираете все divs, у которого есть row extra-detail-gist класс.