Load accordion in panel onclick in jquery

[sirinisk]

Hi PHP and Jquery gurus, I have a PHP and Jquery script, the program does work partially, but the real issue is If i take the issue part out it works great, but it creates a different issue. To fix the issue, I want the accordion panel to load only when the accordion is click, but to achieve it I am not able to find a good way to do it, here is what I would like to accomplish, I have some data in the accordion that i would like to pass to the jquery, which then would call a dynamic php script which would load the panel. Here is the code I have, need help in send the parameters from the existing php to jquery, then need help in sending from jquery to new php script.
Exisitng php code -

if (!$statement->error)
    { 
      $statement->bind_result($category, $event, $datetime, $from, $Uniid, $username);
       while($statement->fetch())
            {
               $output .= ''
               ?>
<p class="accordion"><?php echo "<strong>{$username}</strong> "  . "<strong> <b>|</b>  </strong> "  . "<strong>{$datetime} </strong>   "   .   "<strong> | </strong>   "   .    $category   .   "<strong> |   </strong>"     .  $event ; ?> </p>

Existing jquery -

<script>
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
 acc[i].onclick = function() {
 var setClasses = !this.classList.contains('active');
 setClass(acc, 'active', 'remove');
 setClass(panel, 'show', 'remove');
 if (setClasses) {
 this.classList.toggle("active");
 this.nextElementSibling.classList.toggle("show");
 }
 }
}
function setClass(els, className, fnName) {
 for (var i = 0; i < els.length; i++) {
 els[i].classList[fnName](className);
 }
}
});
</script>