I have a div with the same class name that is iterated in a php loop. Whenever the more link is clicked, all the divs with class='detail-section' are opened and closed and not just the specific one selected in the loop. I have tried $(this).closest and it didn't seem to change anything. Either cause it's not close or something. I cant figure it out. Any help is greatly appreciated.

```
foreach($rows as $a => $b){
  <div><a class='more-detail' style='cursor: pointer; font-color:#0000ff;'>More...</a></div>

  <div class='detail-section' style='display: none;'> 
     <!--Content-->
  </div>

  <div><a class='less-detail' style='cursor: pointer; font-color:#0000ff;'>Less...</a></div>
}

```

Here is my script to 

```
<script>
$(document).ready(function(){

  $(".more-detail").click(function(){
    $(".detail-section").css("display", "block");
    $(".more-detail").css("display", "none");
    $(".less-detail").css("display", "block");
  });

  $(".less-detail").click(function(){
    $(".detail-section").css("display", "none");
    $(".more-detail").css("display", "block");
    $(".less-detail").css("display", "none");
  });

});
</script>

```