JSFiddle - React, Tailwind, and code Playground

by thallysondias

HTML

Quantidade de Crianças: <select name="ch" id="ch" class="pretty-select">

<option value="0" selected="selected">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div id="output"></div>  

 <hr>

Idade total: <input type="text" id="ag" name="ag">
<br>
<input type="button" class="button" value="Guardar Idades"/>

JavaScript

//Detectar a quantidade de crianças
$('#ch').on('change keyup blur', function() {
    var val = $(this).val();
    $('#output').empty();
    var output;
    for (var i = 0, length = val; i < length; i++) {
        output = 'Criança ' + i + ': <input type="number" name="ag' + i + '" id="ag' + i + '"/><br>';
        $('#output').append(output);
    }
});
//Inserir as idades das crianças no input #ag   
var $salvarIdade = $(".button");
$salvarIdade.click(function() {
    var texto = "";
    var qtd = $("#ch").val();
    qtd = +qtd;
    for (var i = 0; i < qtd; i++) {
        if ($('#ag' + i).val()) {
            if (i !== qtd ) {
                texto += $('#ag' + i).val() + ";";
            }
        }
    }
    $('#ag').val(texto);
});