Jquery Selector for dynamically created elements

Question

I am creating html in PHP like here

<?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
}
?>

Here is my Jquery code

$(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;
        });
    });

This code apply for all div created and all divs are showing at click.How can i differenciate for each click on 'more'?

UPDATED : This code is working for first one properly..but rest of the records are not working

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

Here is JSFIDDLE

Answer 1

Try this:

Working Example

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

With this line $('.row.extra-detail-gist') you are selecting all the divs which has row extra-detail-gist class.