javascript - Dynamic id assign to collapsible div -

i have set of records stored in sql database pull , display these on page using php , html. i'm trying create collapsible div hide of information record. when trying divs close records , not single record, question how assign unique id each individual div (say named each record name pulled database.

here have far:

$chnumber = $record['ch_number'];?>  <div id="prof_prod" <!--style="display: none;"-->>     <div class="groupbox showgraph">         <div class="header">             <div class="title-container">                 <div class="title">part number: <i id="partnumber"></i><?php echo $record['ch_number'] ?></div>                 <div class="title">serial number: <i id="serialnumber"></i><?php echo $record['serial_number'] ?></div>                 <div class="title">status: <i id="status"></i><?php echo $record['ch_number'] ?></div>                 <div class="title">current wip time: <i id="wiptime"></i><?php echo $record['wip_time'] ?></div>                 <div id="<?php echo $chnumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div>             </div>         </div>      <div class="data-container">         <div class="data-row">            <div class="data-title">nc number: </div>         </div>     </div> </div>  <script>  $(document).ready(function(){     $("echo json_encode($chnumber)").click(function(){         $(".data-container").slidetoggle("slow");     }); }); </script> 

now know there maybe generic html errors here that's me copying code , taking stuff out (apologies). question based around line:

<div id="<?php echo $chnumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div> 

and:

<script>  $(document).ready(function(){     $("echo json_encode($chnumber)").click(function(){         $(".data-container").slidetoggle("slow");     }); }); </script> 

you should have seen how renders. code should be:

$(document).ready(function(){     $("#<?php echo $chnumber; ?>").click(function () {         $(".data-container").slidetoggle("slow");     }); }); 

i don't understand use of json_encode here. missing <?php ?> tags.

also, try using this instead of '.data-container', selects everything. so, might using:

$(document).ready(function(){     $("#<?php echo $chnumber; ?>").click(function () {         $(this).closest(".groupbox.showgraph").next(".data-container").slidetoggle("slow");     }); });