Changing span of several checkboxes with single javascript

I am stuck on this, I am new in HTML/JavaScript code. I am trying to create an HTML code where checkboxes must change an image span (or caption) to "CORREGIDO". So, many images have a reference number on their caption but when the checkbox of that image is clicked, must change the string into "CORREGIDO". My HTML code so far is the following:

<ul class="galeria">
    <li><a href="#img1"><img src="Foto1.jpg"   onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox"  id="exp1">  </a>
        <h2><span class="spanTxt []">OT:   4251678</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li> 
    <li><a href="#img2"><img src="Foto2.jpg"   onerror="this.style.display='none'"/> <input class="confirmation" type="checkbox"  id="exp2"> </a>
        <h2><span class="spanTxt []">OT:   4876852</span> <span class="spanTxt [] hidden"> CORREGIDO </span></h2></li>
 </ul>

So far it works for a single picture. But the JavaScript is made for a single checkbox "id". This JavaScript code I took it from this webpage. The script I am using is:

document.getElementById('exp1').addEventListener('change', function(e) {changeDisplay()})

function changeDisplay() 
    {document.querySelectorAll('.spanTxt').forEach(function(elem) {elem.classList.toggle('hidden')})} 

Maybe is not he best approach for this...