Javascript Adicionar uma lista ao clicar no botão "+" .jsp

Ana Grossi · 21 de setembro de 2018

Olá! Estou tentando fazer um cadastro que funcionaria da seguinte forma:

Vou fazer a página de cadastro de uma determinada função;
Dentro desse cadastro, quero colocar um botão de "+" para que o usuário possa adicionar EPIs relacionados à função;
Esses EPIs já estão cadastrados no sistema, daí a ideia era que aparecesse uma lista dos EPIs cadastrados e o usuário selecionasse o que ele quiser;
Quando ele clicasse no "+" apareceria uma outra lista, e etc;

É JavaWeb, então é página em .jsp.

O código que tenho é para adicionar um campo de texto simples, sem ser do tipo "select".

<script type="text/javascript">
                var qtdeCampos = 0;

                function addCampos() {
                var objPai = document.getElementById("campoPai");
                //Criando o elemento DIV;
                var objFilho = document.createElement("div");
                //var objData = document.createElement("div");
                //Definindo atributos ao objFilho:
                objFilho.setAttribute("id","epi"+qtdeCampos);
                //objData.setAttribute("id","data"+qtdeCampos);
                //Inserindo o elemento no pai:
                objPai.appendChild(objFilho);
                //objPai.appendChild(objData);
                //Escrevendo algo no filho recém-criado:
                document.getElementById("epi"+qtdeCampos).innerHTML = "<input type='text' id='epi"+qtdeCampos+"' name='epi[]' value='EPI: "+qtdeCampos+"'><input type='button' onClick='removerCampo("+qtdeCampos+")' value='Apagar EPI'>";
                
                //document.getElementById("data"+qtdeCampos).innerHTML = "<input type='text' id='data"+qtdeCampos+"' name='data[]' value='Data de Recebimento: "+qtdeCampos+"'> \n\\n\
                
                qtdeCampos++;
                }

                function removerCampo(id) {
                var objPai = document.getElementById("campoPai");
                var objFilho = document.getElementById("epi"+id);

                //Removendo o DIV com id específico do nó-pai:
                var removido = objPai.removeChild(objFilho);
                }
                </script>

No formulário fica assim:

<div> 
      <label for="epiFunc">EPIs: </label>
      <div id="campoPai"></div>
      <input type="button" value="Adicionar EPIs" onclick="addCampos()">
</div>