Any solution will be most appreciated. Thanks

2019

for($w = 1; $w <= $classesH; $w++) { preg_match('/(.*?)</b>/s', $sampleH, $match); if($match) { ?>

<div>
<h2 style="text-align: center">History</h2>
 <?php
$sampleH = '<b class="1">2020</b>

<p class="1"><strong class="1">Jan 10</strong> This is first paragraph.</p>
<p class="2"><strong class="2">Feb 2</strong> this is second paragraph</p>
<p class="3"><strong class="3">Mar 23</strong> this is third paragraph</p>

<b class="2">2019</b>

<p class="4"><strong class="4">Jan 20</strong>This is fourth paragraph.</p>
<p class="5"><strong class="5">Feb 30</strong>this is fifth paragraph</p>
<p class="6"><strong class="6">Mar 2</strong>this is sixth paragraph</p>';
$classesH =  100;




 for($w = 1; $w <= $classesH; $w++) {
preg_match('/<b class="'.$w.'">(.*?)<\/b>/s', $sampleH, $match); 
if($match) {
?>
<button class="accordion">
<?php echo $match[1]; 
?>
</button>
<div class="panel">
<?php
for($y = 1; $y <= $classesH; $y++) {
preg_match('/<strong class="'.$y.'">(.*?)<\/strong>/s', $sampleH, $match1); 
if($match1) { ?>
<p class="accordion1">
<?php 
echo $match1[1];  
 ?>   
</p>
<?php
for($z = 1; $z <= count($match); $z++) {
preg_match('/<p class="'.$z.'">(.*?)<\/p>/s', $sampleH, $match2); 
if($match2) {  
?>           
<span class="panel1">
<?php echo $match2[1];
  ?>
</span>
<?php }}}} ?>
</div>
<?php }}  ?>
</div>




<!-----------------------  Scripts -------------------------->



<script>
var acc = document.getElementsByClassName("accordion");
var i;
var abc = document.getElementsByClassName("accordion1");
var a;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
    
for (a = 0; a < abc.length; a++) {
  abc[a].addEventListener("click", function() {
    this.classList.toggle("active1");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>