one html code block vs many and 429 error

Site URL: https://www.indianclassicalmusic.com/glossary

I have a glossary page on our website that has around hundred words on it. Each word is an html of the form

<h4 id="TheWord">The Word
    <a href="javascript:sayGlossaryTerm('theword')">
        <i class="fas fa-volume-up"></i> <!-- this is a font awesome speaker icon. The href javascript gets the audio element by id and calls .play() on it. The js function is in the page header settings. -->
    </a>
</h4>
<audio id="theword">
    <source src="/s/TheWord.m4a" > <!-- this file is uploaded in square space link editor. -->
</audio>
<p>The meaning of The Word.</p>

For a long html page should I be creating a single html block for all the content on the page, in this case the above html a hundred times or should I be creating an independent html code block for each word?

Another side effect of this editing this html is that whenever I edit the audio file name. There's some trigger on the keypress that loads all the 100 audio files (They are all short 2 second files) and gives a 429 error. 

Please advise. Thanks.

5 hours ago, vkicm said:

and gives a 429 error

This error indicates that you are hitting the server to hard ( many times or in to rapid a fashion ) and SS doesn't like it and have cut you off.

This indicates to me that SS is not set up for serving a lot of hits via the method you have implemented. You may need to find a file server service that can handle lots of hits. Something like AWS (Amazon Web Services) S3 (Simple Storage Service). AWS services although much improved in the ease of use over the years are still for the fairly technically inclined.

As for your other questions I don't have answers at this time