Вложено в цикл для сопоставления массива субтитров [0] с массивом подписей [0]

Question

Я использую XML для создания основы для веб-сайта, чтобы другая сторона могла без труда изменить контент на этом сайте без тяжелой работы с HTML.Прямо сейчас я пытаюсь выровнять мои заголовки h3 с соответствующими им элементами абзаца, но в итоге назначается каждый из всех элементов, когда должно получиться, что первый получает первый элемент, а второй получает второй элемент.

Мой XML выглядит примерно так

<steps>
<step number="1">
    <title>Domain Name</title>
    <description>Before getting the server setup, we have to make sure that we have a name visible to the public. It would be pretty outrageous to ask users to remember our site based on the IP address (E.g. 52.25.195.213). IP addresses are hard to remember and mean virtually nothing to humans - which is why we need a nice plain text name to be remembered by.
    </description>
    <subtitle>Getting Logged Into Amazon Web Services</subtitle>
    <subdescription>As I mentioned in the overview to this guide, we will be using Amazon Web Services for the first 5 steps and because of that, you will need to create an account on their site. Again if you have a RHEL server already, please proceed to step 5 or 6 depending on whether or not you know how to connect to your server. If you are new to Amazon Web Services, hosting a micro server will cost you virtually nothing, but you will still need to provide your credit card information to prove that AWS can bill you should you incur charges (For the purpose of this guide, we will only be setting up one micro server, and as such you will be billed the minimal amount even if your server runs 24/7). After your first year of operation you will not be covered under the free tier, so please refer to this page to get the most up-to-date pricing information. Now that we've covered the not so exciting topic of cost, let's log in to AWS and get started!
    </subdescription>
    <subtitle>Picking Your Server Farm</subtitle>
    <subdescription>Upon logging in you should see your dashboard which contains lots of icons. If your layout is somehow different because you are a new user, don't panic. This just means that you will have to do a bit of searching to find the services I mention. To start, let's designate a desired server farm. This decision is not particularly important to average web users, as they will access your site from all over the world. However, for you the admin, the server farm should be as close to you as possible to avoid unnecessary latency. To select a server farm, go to the drop-down next to your name, and pick a location (for me North Virginia is the best pick because I live closer to the east coast).
    </subdescription>
</step>
<steps>

И циклы for, которые находятся в HTML-файле в теге, выглядят так:

html += "<h2>" + title + "</h2>";
html += "<hr/>";
html += "<p>" + description + "</p>";
    for (var j = 0; j < subtitles.length; j++) {
        for (var k = 0; k < subdescriptions.length; k++) {
            html += "<h3>" + subtitles[j].innerHTML + "</h3>";
                html += "<p>" + subdescriptions[k].innerHTML + "</p>";
             }
    }

Это результирующее изображение;он использует субтитры [0] и отображает их со всеми подписями в массиве.

РЕДАКТИРОВАТЬ:

@ MikeMcCaughan Первоначально я не включил эту часть в свой вопрос, но субтитры и вложенные описания назначаются через эти строки

var allSteps = xml.querySelectorAll('step');
for(var i = 0; i < allSteps.length; i++){
    var step = allSteps[i];
    var subtitles = step.querySelectorAll('subtitle');
var subdescriptions = step.querySelectorAll('subdescription');