Create dynamic inputs from a json object

Question

I have a form that the user can add several languages who can speak, this form consists of a dropdown and a button to add the respective language. At the moment I click on the add button it adds new object to an array, as shown in the following image:

What I wanted to do is that whenever a new language is added, at the same time an Hidden or disable input is created underneath the dropdown with the name/id of the selected language as an example that I show below:

Then follow the code I’m using to add the object, coming from the dropdown, to the array

$(document).ready(function() {               

 var options = [];

  // adicionar linguas ao ao objeto para mostrar
  $('#add-lingua').click( function () {

    options.push({
      "id" :  $("#selectLinguas option:selected").val(),
      "lingua" :  $("#selectLinguas option:selected").text(),
    });
    $("#selectLinguas option:selected").remove();
    console.log(options);      
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group selectLinguas">
  <div class="col-md-9">
    <label for="selectLinguas"><strong>Conhecimento de línguas</strong></label>
    <select class="form-control" id="selectLinguas" name="selectLinguas">
      <option value="1">Lingua 1</option>
      <option value="2">Lingua 2</option>
      <option value="3">Lingua 3</option>
      <option value="4">Lingua 4</option>
    </select>
  </div>
  <label for="add-lingua"></label>
  <div class="col-md-3"><button type="button" class="btn form-control add-lingua" id="add-lingua">Adicionar</button></div>
</div>
<div class="form-group selectedLinguas">
  <div class="col-md-6">
    <input type="text" disabled name="linguaSelecionada" id="linguaSelecionada" class="form-control" value=""/>
  </div>
  <div class="col-md-3">
    <select class="form-control" id="selectNivelLingua" name="selectNivelLingua">
      <option value="satisfaz">Satisfaz</option>
      <option value="bom">Bom</option>
      <option value="muito bom">Muito Bom</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="button" id="remove-Lingua" class="btn btn-danger"><i class="fa fa-close"></i></button>
  </div>
</div>

Answer 1

JQUERY APPEND

With the .append() from jQuery you solve it like this:

$(document).ready(function() {               

 var options = [];

  // adicionar linguas ao ao objeto para mostrar
  $('#add-lingua').click( function () {

    options.push({
      "id" :  $("#selectLinguas option:selected").val(),
      "lingua" :  $("#selectLinguas option:selected").text(),
    });
    
    $("#append").append("<input type='hidden' value='"+$("#selectLinguas option:selected").val()+"' id='appended"+$("#selectLinguas option:selected").val()+"'>"); // Append um input HIDDEN

    $("#selectLinguas option:selected").remove();
    console.log(options);      
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group selectLinguas">
  <div class="col-md-9">
    <label for="selectLinguas"><strong>Conhecimento de línguas</strong></label>
    <select class="form-control" id="selectLinguas" name="selectLinguas">
      <option value="1">Lingua 1</option>
      <option value="2">Lingua 2</option>
      <option value="3">Lingua 3</option>
      <option value="4">Lingua 4</option>
    </select>
  </div>
  <label for="add-lingua"></label>
  <div class="col-md-3"><button type="button" class="btn form-control add-lingua" id="add-lingua">Adicionar</button></div>
</div>
<div class="form-group selectedLinguas">
  <div class="col-md-6">
    <input type="text" disabled name="linguaSelecionada" id="linguaSelecionada" class="form-control" value=""/>
  </div>
  <div class="col-md-3">
    <div id="append"></div><!-- Aqui serão colocados os Appends -->
    <select class="form-control" id="selectNivelLingua" name="selectNivelLingua">
      <option value="satisfaz">Satisfaz</option>
      <option value="bom">Bom</option>
      <option value="muito bom">Muito Bom</option>
    </select>
  </div>
  <div class="col-md-3">
    <button type="button" id="remove-Lingua" class="btn btn-danger"><i class="fa fa-close"></i></button>
  </div>
</div>