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 ag0 = $('#ag0').val() + ";";
         var ag1 = $('#ag1').val() + ";";
         var ag2 = $('#ag2').val() + ";";
         var ag3 = $('#ag3').val() + ";";
         var ag4 = $('#ag4').val();
     
			   $('#ag').val(ag1 + ag1 + ag2 + ag3 + ag4);	
    });