Добавление / удаление css класса нарушает js иногда?

Question

Хорошо, здесь происходит нечто странное. Во-первых, у меня есть эти <span>, с svgs, которые имеют фильтр размытия по Гауссу - 7 из них:

<span name = "sunlight">
                          <div id = "svgContainer">
                            <div id = "inner">
                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 700 650">
                            <defs>
                              <filter id="Blur"><feGaussianBlur stdDeviation="25" /></filter>
                            <g id="" data-name="Layer 1"><rect class="cls-1" width="700" height="558"/></g><g id="Img" data-name="Layer 2"><path class="cls-2" d="M403.71,111.69q-47.58,19.77-94,42.26-45.18,22-89,46.69c-13.09,7.37-26.15,14.91-38.11,24A160,160,0,0,0,163.94,241a71.68,71.68,0,0,0-8.7,10.37,16.54,16.54,0,0,0,2.12,20.7c3.48,3.41,8.14,5,12.85,5.71l13,1.94,26,3.89,51.71,7.73L364.68,306.8l13,1.95-7.17-17.63A117.3,117.3,0,0,1,361.32,305l1.87-2.43c-10.79,14-24.25,25.51-37.89,36.59-13.79,11.19-28,22-40.41,34.74a151.85,151.85,0,0,0-20.2,25.28c-3.89,6.18-.36,16.17,7.17,17.62a91,91,0,0,1,18,5.5L287,421.08a93.25,93.25,0,0,1,20.12,11.77L304.72,431a90.48,90.48,0,0,1,14.91,14.56c1.82,2.24,5.73,3.51,8.49,3.51a12.22,12.22,0,0,0,8.48-3.51,12.1,12.1,0,0,0,3.52-8.49l-.43-3.19a11.93,11.93,0,0,0-3.09-5.29c-11.62-14.33-27.45-24.86-44.72-31.15a90.6,90.6,0,0,0-13.64-3.76l7.17,17.63q3.13-5,6.73-9.63l-1.88,2.43c11.28-14.54,25.42-26.48,39.66-38s28.95-22.83,41.52-36.31a139.45,139.45,0,0,0,19.8-26.54,11.88,11.88,0,0,0,.6-10.68c-1.31-3.1-4.21-6.41-7.78-6.95l-83.92-12.54-83.92-12.55L193,257l-11.77-1.76c-3.28-.49-6.76-.7-9.87-1.91l2.87,1.21a9.41,9.41,0,0,1-2-1.16l2.43,1.87a8.2,8.2,0,0,1-.78-.78l1.88,2.43a5.42,5.42,0,0,1-.55-.93l1.21,2.87a5.84,5.84,0,0,1-.29-1.09l.43,3.19a4.3,4.3,0,0,1,0-1l-.43,3.19a7.34,7.34,0,0,1,.38-1.37l-1.21,2.87a12.1,12.1,0,0,1,1.27-2.1l-1.87,2.43c6.15-7.92,13.78-14.75,21.68-20.88l-2.43,1.88c11.16-8.6,23.29-15.81,35.53-22.75q20.44-11.61,41.22-22.6,41.77-22.14,84.74-41.9,24.18-11.12,48.72-21.48l-2.86,1.21q4.41-1.86,8.83-3.69c3-1.26,5.45-2.58,7.17-5.52a12.3,12.3,0,0,0,1.21-9.25A12.15,12.15,0,0,0,413,112.9c-2.64-1.4-6.34-2.41-9.24-1.21Z"/>
                          </g>
                        </defs>
                        <use style="fill:pink;" filter="url(#Blur)" xlink:href="#Img"
                          transform="translate(0,0)"/>
                        <use style="fill:white;" xlink:href="#Img"/>
                          </svg>

                          </div>
                          </div>
                          <h4>[ sunlight ]</h4>
                          <h5>5.2</h5>
                    </span>

Далее, у меня есть css, который либо устанавливает <span> display:inline-block или display:none:

#center > span.active {
        display: inline-block;
    }

    #center > span {
    display: none;
        margin-left: -35px;
    margin-right: -35px;
    }

С js я затем (прокручиваю) перебираю список массивов. Мне нужно добавить или удалить активный класс из каждого <span> в зависимости от того, находится ли его name в массиве с текущим индексом.

$('#center').children().each(function(i, child) {

      if(localThis.currentDataPt[0].includes($(child).attr('name')))
      {
        $(child).addClass('active');
      } else {
        $(child).removeClass('active');
      }

Это нормально. Тем не менее, когда мы дошли до этого места, где я установил с помощью js атрибут "feGaussianBlur", на MOST массивов, атрибут визуально устанавливается на ноль. Этого не происходит, когда я не делаю шоу / скрытие:

$(child).find("feGaussianBlur").attr("stdDeviation", ((localThis.currentDataPt[1]/10)*45).toString());

Почему это произошло?