Конфликт между частями кода JS

Всех приветствую. Подскажите, в чём проблема. В JS файле конфликт между двумя частями кода. По отдельности работают нормально, но вместе не хотят.

HTML:

<div style="display: none;" class="contentFoam hidden"><img id="sfoam"  src="button/sfoam.png"></div><!-- Пена -->

<div class="foam_" id="idFoam" onclick="toggleA()">
    <button class="btnFoam" id="idbtnFoam" type="button" value="0" onclick="tests(this)" >Пена</button>
    <label><input type="checkbox" id="ibtnFm" class="btnFm" name="fm" value="foam" onclick="tests(this)" placeholder="10" /><br/></label>
    </div>

JS:

/* Check and Uncheck */
function toggleA() {
    var elm = document.getElementById('ibtnFm');
    elm.checked = !elm.checked;
}
/* Check and Uncheck */

/* Отображение и скрытие изображения по нажатию */
{const foam_ = document.querySelector(".foam_");
const contentFoam = document.querySelector(".contentFoam");

foam_.addEventListener("click", foam_Click);

function foam_Click() {
    console.log(contentFoam.classList);

    contentFoam.classList.toggle("hidden");
}


$('.foam_').on('click',function() {
    if (!$(this).hasClass('active')) {
        
        $(this).html('<div class="foam_" id="idFoam" onclick="toggleA()"><button class="btnFoam" id="idbtnFoam" type="button" value="0" onclick="tests(this)" >Пена</button><label><input type="checkbox" hidden id="ibtnFm" class="btnFm" name="fm" value="foam" onclick="tests(this)" placeholder="10" /><br/></label></div>');
    } else {
        $(this).html('<div class="foam_" id="idFoam" onclick="toggleA()"><button class="btnFoam" id="idbtnFoam" type="button" value="0" onclick="tests(this)" >Пена</button><label><input type="checkbox" hidden id="ibtnFm" class="btnFm" name="fm" value="foam" onclick="tests(this)" placeholder="10" /><br/></label></div>');
    }
    $(this).toggleClass('active');
});

}
/* Отображение и скрытие изображения по нажатию */

Весь код на Jsfiddle: https://jsfiddle.net/NEZGARDO/k0z3b4hs/8/