Code to dynamically add HTML nodes works in Chrome and Safari but not in Firefox

I am using the following code to dynamically add nodes to the html document:

HTML:

    <section>

           <div class="labelDiv ____ labelDivTextNeighborhoodTips">
                   <div class="filterDiv publicTransportationTips filterDivTextNeighborhoodTips">
                          <input type="text" name="publicTransportationTips"></input>
                           <span>1.</span>
                    </div>
            </div>
   <section>

Javascript:

const squareAddButton = document.getElementsByClassName('cls-1')[0];
const svgTips = document.getElementById('Layer_2');

const labelDivsTips = document.getElementsByClassName('labelDivTextNeighborhoodTips');



function addButtonHover() {

    squareAddButton.style.fill = '#FFCCCC';
  }

function addButtonMouseout() {
    squareAddButton.style.fill = 'none'
}

function clickAddButton() {

   var lastLabelDiv = labelDivsTips[labelDivsTips.length - 2];
   var lastFilterDiv = lastLabelDiv.children[0];
   let spanNumber = parseInt(lastFilterDiv.children[1].innerHTML) + 1;


   if(spanNumber <=5){

       spanNumber =spanNumber.toString() +'.'

       var parentElement = lastLabelDiv.parentNode

       var labelDiv = document.createElement('div');
       labelDiv.setAttribute('class', 'labelDiv ____ labelDivTextNeighborhoodTips show');

       var filterDiv = document.createElement('div');
       filterDiv.setAttribute('class', "filterDiv publicTransportationTips filterDivTextNeighborhoodTips");

       var input = document.createElement('input');
       input.setAttribute('type', "text");
       input.setAttribute('name', "publicTransportationTips");


       var span = document.createElement('span');
       var textos = document.createTextNode(spanNumber);

       span.appendChild(textos);
       filterDiv.appendChild(input);
       filterDiv.appendChild(span);
       labelDiv.appendChild(filterDiv)

       parentElement.insertBefore(labelDiv, lastLabelDiv.nextSibling);

    }

  }

  svgTips.addEventListener('mouseover', addButtonHover);
  svgTips.addEventListener('mouseout', addButtonMouseout);
  svgTips.addEventListener('click', clickAddButton)

This code works perfectly in Google Chrome and in Safari but in Firefox when the button is clicked the text node inside the span element that is in the second to last div mysteriously disappears.