Bootstrap accordion click event not working properly with dynamic data

Question

I am using bootstrap v3.3.7 and displaying accordions.

  <?php if($post->prime==1) {?>
    // bootstrap accordions code
   <?php } ?>

  <?php foreach ($secMember as $secPay) {?>
   // bootstrap accordions code
  <?php }?>

let's talk about the above if condition first. If the $post->prime==1 then it wil display the accordion.

Let's talk about the foreach .

I am fetching the records from the database and depanding upon the total number of records it will display the accordions.

I am getting the accordion perfectly, there is no issue with it but I am getting the issue on click on accordion. I mean, When I click on according then it's closing only the first accordion. If I close the second accordion on click than also it's closeing the first one. I think there is some issue with Id . Can you check and help out with this issue?

I am geting the output is

 ------------------
    first accordion //getting from if condition
    ------------------
   //Geting from foreach condition
    ------------------
    second accordion
    ------------------
    third accordion
    ------------------
      |
      |
    //display depanding upon the number of records

If I click on second accordion then it is closing first one same as on third accordion.

Whole code here

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">

  <?php if($post->prime==1) {?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php echo $secPay->title;?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php echo $secPay->content;?>
      </div>
    </div>
  </div>
  <?php }?>


  <?php foreach ($secMember as $secPay) {?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php echo $secPay->title;?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php echo $secPay->content;?>
      </div>
    </div>
  </div>
  <?php }?>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

Yes, Finally I found the answer. I don't know it's correct or not.

What I did,

I created a variable called as $x=1 outside of the foreach and $x++ inside foreach. I updated x on two place.

First one

<a role="button" data-toggle="collapse"  href="#collapseOne<?php echo $x;?>" aria-expanded="true" aria-controls="collapseOne">

Second one

<div id="collapseOne<?php echo $x;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

and it's working perfectly. Please let me know I am on the right path or not. should I change anything more in this?