div expand and collapse is not working in my php code - php

Question

In my php page i have these following code:-
<?php
include ('dbConnect/dbConnect.php');
$query = "Select * from RitualType";
$queryResult = mysqli_query($dbcon, $query);
?>
<!-- <div class="panel-grid-cell" id="pgc-110-6-1" >--><br/>
<div class="row-fluid" style="">
<div class="col-md-4" id="" style="position: fixed; left: 50pt; width:254px;height:50px; top: 87px; z-index: 99999999;" >
<div class="textwidget" ><?php $i = 0;
while ($row = mysqli_fetch_array($queryResult)) {
?><div id="SpanHoma">
<span class="" style="color: red;font-size: 14px;"><strong><?php echo $row['Name'] ?></strong></span>
<div class="textwidget" id="RitualsGroup" style="display:none;">
<?php
$query1 = "Select * from Rituals where RitualTypeId=" . $row['Id'];
$queryResult1 = mysqli_query($dbcon, $query1);
?>
<?php while ($row1 = mysqli_fetch_array($queryResult1)) { ?>
<div class="Homas" > <?php echo "<a style='color: #000000;' href='#" . $row1['Id'] . "'>" ?>
<i class="fa fa-hand-o-right"></i> <span class="what-we-offer" style="color: #000000;">
<?php echo $row1['Name'] ?> </span><?php echo '</a>'; ?><br />
</div><?php $i++;
} ?>
</div></div><?php } ?>
</div>
</div>
</div>
Where RitualType is Heading and Rituals are the contents.
I need to make the div expand and collapsible. Right Now the page is like this
A
B
C
D
E
When i click A then the contents of A is getting displayed like
A
a
b
c
B
C
D
E
But when i click B the div is not getting expanded. It only Works for A. I want the particular div to open when i click the Main Heading.
Javascript Code to toggleis shown below
$(function () {
$("#SpanHoma").on("click", function () {
$("#RitualsGroup").toggle();
});
$('.RitualsGroup').hide();
});

Answer 1

You need to try like this (convert id to class in html and change javascript code like below):-
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
});
});
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle(); // this will check which one is clicked currently
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "SpanHoma">
<span>A</span>
<div class= "RitualsGroup" style = "display:none;">
<li>c</li>
<li>d</li>
<li>e</li>
</div>
</div>
<div class= "SpanHoma">
<span>B</span>
<div class= "RitualsGroup" style = "display:none;">
<li>f</li>
<li>g</li>
<li>h</li>
</div>
</div>

Answer 2

Its because of you are giving same id for multiple div. try this:
change this:
<div id="SpanHoma">
to
<div class="SpanHoma">
and
<div class="textwidget" id="RitualsGroup" style="display:none;">
to
<div class="textwidget RitualsGroup" style="display:none;">
in jquery:
$(function () {
$(".SpanHoma").on("click", function () {
$(this).find(".RitualsGroup").toggle();
});
});