Issue with looping through elements in an inner array

Question

I'm having an issue looping through a set of css classes when an iteration of an outer loop is being executed.

What I'm trying to do is to append all the paragraphs under the current heading on to the new text that is being created, however, it only appears to append the first paragraph and then appends the second on to the hext heading.

What I would like is to have all content under each heading to be appended on each eg. para 1,2,3 appended under Heading 1, para 1 & 2 appended under Heading 2 etc.

Any help would be very much appreciated.

Code is below and the script tag that's required is being created and the script runs without errors, I just need help on getting the correct paragraphs under heading to be joined correctly under each of the headings to form the correct text in the newly created script tag:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

var els = document.querySelectorAll(".panel");
for (var x = 0; x < els.length; x++) {
  if (window.matchMedia("(min-width: 481px)").matches) {
    els[x].style.display = 'block';
  }
}

//Question headers & Paragraph Answers

var scriptTag = document.createElement("script");

scriptTag.setAttribute("type", "application/ld+json");

var start = '{"@context": "https://schema.org","@type": "TestPage","mainEntity": [';
var end = ']}';
var headings = document.querySelectorAll(".list-test .accordion");
var paragraphs = document.querySelectorAll(".panel > p");
var headElement = document.querySelector("header");

scriptTag.prepend(start);

for (var i = 0, j = 0; i < headings.length && j < paragraphs.length; i++, j++) {
  scriptTag.append('{"@type": "Question", "name": "' + headings[i].innerHTML + ' ", ');
  scriptTag.append('"acceptedAnswer": {"@type": "Answer","text": "' + paragraphs[j].innerHTML.trim() + ' "}}, ');
}

scriptTag.append(end);

headElement.append(scriptTag);

.accordian-type {
  margin-bottom: 5px;
  padding: 10px;
  background: pink;
  color: #fff;
}

.accordion.active,
p.accordion:hover {
  background: pink;
  color: #fff;
}

.accordion:after {
  color: #fff;
}

@media all and (max-width: 40em) {
  .list-test {
    width: 90%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<header>
  <p>Test header</p>
</header>

<section class="row text-center list-test">
  <h2>
    Test List
  </h2>
  <p class="accordion accordian-type">List Header 1
  </p>
  <div class="panel">
    <p>Para 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      <p>
        Para 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
      <p>
        Para 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
  </div>
  <p class="accordion accordian-type">List Header 2</p>
  <div class="panel">
    <p>Para 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      <p>
        Para 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
  </div>
  <p class="accordion accordian-type">List Header 3</p>
  <div class="panel">
    <p>Para 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      <p>
        Para 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
      <p>
        Para 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
      <p>
        Para 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
  </div>
  <p class="accordion accordian-type">List Header 4</p>
  <div class="panel">
    <p>Para 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      <p>
        Para 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
      <p>
        Para 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      </p>
      Para 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
    <p>
      Para 5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
  </div>
</section>