No JavaScript
tenho o seguinte trecho do código:
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)
Toda vez que clico em adicionar, ele e executado, adicionando uma nova row. apenas o primeiro campo aparece de inicio. os outros vao aparecer de acordo com o que o usuário selecionar. Faço isso com a seguinte função:
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;
}
}
Quando adiciono apenas um, ele funciona perfeitamento. Mas e se vou adicionar outra row e mudo o campo nela, o hidden é removido/adicionado do primeiro que foi adicionado. Como fazer para cada vez que eu adicionar uma row, os campos de cada um que ele adicionar sejam independentes do que foi adicionando anteriormente?
Minha pergunta é diferente da outra pois o que eu quero é adicionar uma nova row quando clicado em adicionar. Depois, dependendo do que o usuario selecionar no primeiro campo, quero esconder ou mostrar outros dois campos