Take the value of a li and create an Hidden input with the value when the li is clickada

Question

Good morning, gentlemen, I’m having a hard time making a move. I want that when clicked on li, it add in div #form an input type Hidden with the value of li. and that this happens only when clicking once.

<div id="selecao">
  <input type="text" class="active" value="Conteudo 1" />
  <input type="text" class="active" value="Conteudo 2" />
  <input type="text" class="active" value="Conteudo 3" />
  <input type="text" class="active" value="Conteudo 4" />
  <input type="text" class="active" value="Conteudo 5" />
  <input type="text" class="active" value="Conteudo 6" />
  <input type="text" class="active" value="Conteudo 7" />
  <input type="text" class="active" value="Conteudo 8" />
  <input type="text" class="active" value="Conteudo 9" />
  <input type="text" class="active" value="Conteudo 10" />
  <input type="text" class="active" value="Conteudo 11" />
  <button class="btn" type="button">Show</button>
  <div id="form">

  </div>


</div>

The content of li is dynamic generated by php, so the only thing that changes are the values, I tried to get all the fields of ul through the function each() but the problem is that the client may want to select other elements and then it ends up not updating directly.

I count on your help and I thank you!

Answer 1

The idea is the same as mine reply in your other question. You only need to assign the function to the event click():

$("#selecao .active").click(function() {
    $('<input/>', {
        type: 'hidden',
        name: 'selecao[]',
        value: $(this).val()
    }).appendTo('#form');
});