Javascript in Transformation - need to increment each instance - can't change ID

I have a JS with a Show/Hide element on a page which is written so that end users at my organization can add new content without knowing html/js, therefore the ID can't be changed for each instance. If the exiting script can be used with an added var to allow the id number to change (+1) for each instance, that would be ideal, however, a new solution is also welcomed. I am new to writing transformations and to Javascript. Script

    <script>
  function showMoreOrLess(thisObj,bonusContent){
    var caption = thisObj.innerHTML;
    //alert(caption);
    if ( caption == "Read more" ) {
        document.getElementById(bonusContent).style.display = "inline";
        thisObj.innerHTML = "Read less";
    } else {
        document.getElementById(bonusContent).style.display = "none";
        thisObj.innerHTML = "Read more";
    }
}
</script>

HTML

<p>lots of intro text here</p>
<span id="1" style="display:none">
<p>Lorem Ipsum is ...</p>
</span>
<p><a onclick="showMoreOrLess(this,'1');">Read more</a></p>