Creating HTML elements via Javascript/Jquery

Question

Hi! I created an HTML form for a curriculum generator and in the field "professional experience" has only inputs to record an experience.

HTML:

 <fieldset id="professional-info">
            <legend><h2>Experiência profissional</h2></legend>
            <div class="prof-exp">

                <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
                <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
                <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
                <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
                <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
                <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
            </div>
            <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
        </fieldset>

JAVASCRIPT:

function addRemoveExp() {
$(".prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};

As you can see, I left a button to add another experience, so that the user can register new experiences if they wish. So far I’m trying to use the methods clone() and appendTo() jQuery, but this """"solution" is not working because:

1. Each click on the add button, it duplicates the current amount of Divs with the class . prof-Exp;

2. Once it has completed the 1st experience and click on the "add another experience" button, all data will be cloned for the experiments below.

That is, it does not serve. What I want is simply to REPLICATE the blank fields so that the user fills them with his other experiences. How do I do that?

How do I solve this? I don’t know what else to do, I really want to solve this challenge! Thank you very much, guys, for any attempt to help.

I’m new to development and I don’t know much yet, so if I’m being too secular, excuse me

Answer 1

Why does this happen? When you search for the class of an element, you are returning all the elements that have that class, including the ones that you just paste.

How to solve? I suggest you do things a little differently. Do not use the main tag to be cloned, but another one created exclusively for this purpose.

Example: Create a Section or div with the id "templates" or use the <template> tag that is already supported by most modern browsers.

Create a Section with id templates and display None. Inside it you place all the elements that will serve as a template to be cloned. Since it will never be edited you will not need to clear the fields before cloning. Also it can have the classes you want without causing conflicts because they will be identified by the parent tag id.

Something more or less like this:

function addRemoveExp() {
  $("#templates .prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="professional-info">
  <legend><h2>Experiência profissional</h2></legend>
  <div class="prof-exp">

    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
  <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
</fieldset>
<section id="templates" style="display: none">
  <div class="prof-exp">
    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
</section>

Your code would be more elegant and easier to maintain if you already entered the first form using the same function as the others:

function addRemoveExp() {
  $("#templates .prof-exp").clone().appendTo("#professional-info");}document.getElementById("add-exp").onclick = function(){addRemoveExp()};
  addRemoveExp();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="professional-info">
  <legend><h2>Experiência profissional</h2></legend>
  <button type="button" form="main" id="add-exp">Adicionar outra experiência</button> 
</fieldset>
<section id="templates" style="display: none">
  <div class="prof-exp">
    <label for="cargo"> Cargo: <input type="text" name="cargo" id="cargo"></label><br>
    <label for="empresa"> Empresa: <input type="text" name="empresa" id="empresa"></label><br>
    <label for="data-inicio"> Início: <input type="date" name="data-inicio" id="data-inicio"></label>
    <label for="data-fim"> Término: <input type="date" name="data-fim" id="data-fim"></label>
    <label for="atual"><input type="checkbox" name="atual" id="atual">Ainda trabalho aqui</label><br>
    <label for="descricao"> Descrição: <textarea name="descricao" id="descricao" cols="40" rows="1"></textarea></label>
  </div>
</section>