Dynamically create div

Question

In the JavaScript I have the following excerpt from the code:

var html = `
    <div class="row">
        <div class="col-sm-3">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="spnChannel">Canal ${quantity + 1}</span>
                    </div>
                   <select id="cmbType" class="form-control form-control-sm custom-select" onchange="changeFields(this);" >
                        <option value="">Tipo</option>
                        <option value="1">Semáforo</option>
                        <option value="2">Outros</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectColor" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                    </div>
                    <select id="cmbDetail" class="form-control form-control-sm custom-select">
                        <option value="">Cores</option>
                        <option value="verde">Verde</option>
                        <option value="amarelo">Amarelo</option>
                        <option value="vermelho">Vermelho</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectFX" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3" id="bond">
                   <select id="cmbBond" class="form-control form-control-sm custom-select">
                        <option value="">Vínculo</option>
                        <option value="1">Faixa 1</option>
                        <option value="2">Faixa 2</option>
                        <option value="3">Faixa 3</option>
                        <option value="4">Faixa 4</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="col-sm-2" id="selectBoolean" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3">
                    <div class="input-group-prepend">
                    </div>
                    <select id="cmbDetail" class="form-control form-control-sm custom-select">
                        <option value="">Selecione</option>
                        <option value="true">Verdadeiro</option>
                        <option value="false">Falso</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-sm-2" id="selectVinculo" hidden="hidden">
            <div class="fields">
                <div class="input-group input-group-sm mb-3" id="bond">
                   <select id="cmbBond" class="form-control form-control-sm custom-select">
                        <option value="">Vinculo</option>
                        <option value="porta">Porta</option>
                        <option value="redeElétrica">Rede elétrica</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
`;

$("#channels").append(html)

Every time I click add, it runs, adding a new Row. only the first field appears from start. the others will appear according to what the user selects. I do this with the following function:

function changeFields(div) {
    var html = ''
    if (div.value == 1) {
        $("#selectBoolean").attr("hidden", true);
        $("#selectVinculo").attr("hidden", true);
        $("#selectColor").attr("hidden", false);
        $("#selectFX").attr("hidden", false);
return;

    } else if (div.value == 2) {
        $("#selectBoolean").attr("hidden", false);
        $("#selectVinculo").attr("hidden", false);
        $("#selectColor").attr("hidden", true);
        $("#selectFX").attr("hidden", true);
return;
    }

}

When I add just one, it works perfectly. But if I add another Row and change the field on it, Hidden is removed/added from the first one that was added. How to do for each time I add a Row, the fields of each one it adds are independent of what it was previously adding?

My question is different from the other because what I want is to add a new Row when clicked on add. Then, depending on what the user selects in the first field, I want to hide or show two other fields

Answer 1

It seems to me that you are adding Divs with the same ids, and when you run your method to changeFields it changes only the ids that are #selectBoolean, #selectVinculo, #selectColor, #selectFX.

You can change the fields that are in the div that is passed by parameter through the selection of attributes or classes for example.

function changeFields(idDiv) {
    var html = ''
    if ($(idDiv).value == 1) {
        $(idDiv + "  > div[class='selectBoolean]").attr("hidden", true);
        $(idDiv + "  > div[class='selectVinculo']").attr("hidden", true);
        $(idDiv + "  > div[class='selectColor']").attr("hidden", false);
        $(idDiv + "  > div[class='selectFX']").attr("hidden", false);
        return;
    } else if (div.value == 2) {
        $(idDiv + "  > div[class='selectBoolean']").attr("hidden", false);
        $(idDiv + "  > div[class='selectVinculo']").attr("hidden", false);
        $(idDiv + "  > div[class='selectColor']").attr("hidden", true);
        $(idDiv + "  > div[class='selectFX']").attr("hidden", true);
        return;
    }

}