Html – How can I use a span class to edit the text inside every span throughout a webpage with the same class at once

I’m working on a project that involves multiple sections of text, each reappearing in multiple places throughout a webpage. Because up to 37 different sections of text occasionally need to be updated, and each one of them will be repeated up to 11 times, I need to find a way to update the document more easily. I’m using spans because these are sentences that are inside paragraphs.

My thinking is if I use a span class, it will associate with each of the individual sections and I can repeat them where they appear throughout.

I assume what I would do is use JavaScript to update the text associated with that class, which would change the text on the site. I’ve looked at so many things and tried a lot and cannot figure out what this would be called.

Because this is a work project, I’m making up a scenario like a movie theater website that would like to update various parts of the site quickly. Here’s a section of code that I tried but using this scenario.

I hope this makes sense, but this is what I tried. When I update the words like four, movies, tomorrow, popcorn, or $5.00, I would like it to update the corresponding text below by the span class. If anyone knows of a different method, that’s fine. My goal is to have some sort of label (like a class) that I can use multiple times to update the text. I want the ability to update them to be in the code so no drop-down boxes or anything visible.

<!-- -----I want to update the words for each span class in the script so that when I have multiple places on the page with the same class, it will update all of the words in that class.  --------- -->

<script>
function myFunction()
{
var div = document.getElementsByClassname('NumberOfMoives');
span.innerHTML = four;

var div = document.getElementsByClassname('MoviePlural');
span.innerHTML = movies;

var div = document.getElementsByClassname('Day');
span.innerHTML = tomorrow;

var div = document.getElementsByClassname('Snack');
span.innerHTML = Popcorn;

var div = document.getElementsByClassname('SnackPrice');
span.innerHTML = $5.00;
}
</script>

<!-- -----I put the words inside the spans that I want to populate from above but in reality, I shouldn't have to add them as they would be empty spans that populate the words that I need when I update the script. --------- -->

<div>
The movie theater is featuring <span class= "NumberOfMoives">four</span> <span class= "MoviePlural">movies</span> <span class= "Day">tomorrow</span>. <span class= "Snack">Popcorn</span> will be sold at the concessions at <span class= "SnackPrice">$5.00</span>. Here is the list of the show times.
<br><br>
With <span class= "NumberOfMoives">four</span> different <span id= "MoviePlural">movies</span> to choose from, you can't turn it down.  We look forward to seeing you <span class= "Day">tomorrow</span>.
</div>