How to show in separate lines/inputs(os), the values of an array every time the Checkbox is clicked?

Question

I have a problem with "how" to show the values received by the onClick event in the checkbox field, which are stored in an array. Every click on a checkbox stores its id in the array.

I can show all the values together while the user clicks on the checkbox using push, however I wanted to show them in separate lines and push would not serve in this case, tried some other ways and continues without the desired result.

function disciplina_escolhida(){
        var disciplina = [];
        $('#disciplina :checked').each(function () {
        disciplina.push($(this).val());
        $('#listas').append('<div><input type="text" name="campo" value='+disciplina+' disabled style="cursor:pointer"></div>');
    });
}

The code so far is this.

EDIT: My doubt is/was, as I should do to show separately the values that are stored in the Checkbox array, because every time someone clicks on a Checkbox, the values/names already selected previously, are added together with the new, making all values stick together on a single line, which was not the intention when showing the data of the same.

Answer 1

Use the first parameter of the .each to pass the array value disciplina. This first parameter represents the index of the element in the .each, but first empty the div with .empty() not to repeat the fields:

function disciplina_escolhida(){
   $('#listas').empty();
   var disciplina = [];
   $('#disciplina :checked').each(function (i) {
      disciplina.push($(this).val());
      $('#listas')
      .append('<div><input type="text" name="campo" value='+disciplina[i]+' disabled style="cursor:pointer"></div>');
   });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Listas:
<div id="listas">
</div>
<div id="disciplina">
   <input type="checkbox" value="1">1
   <br>
   <input type="checkbox" value="2">2
   <br>
   <input type="checkbox" value="3">3
   <br>
   <input type="checkbox" value="4">4
</div>
<button onClick="disciplina_escolhida()">Adicionar</button>