JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<p>Milho <input type="checkbox" class="check" /> </p>
<p>Sorgo <input type="checkbox" class="check" /> </p>
<p>Monenzina <input type="checkbox" class="check" /> </p>
<p>Calcário Calcítico <input type="checkbox" class="check" /> </p>
<p>Farelo de Soja <input type="checkbox" class="check" /> </p>
<p>Farelo de Algodão <input type="checkbox" class="check" /> </p>
<p>Aromatizante <input type="checkbox" class="check" /> </p>
<p>Farelo de Arroz <input type="checkbox" class="check" /> </p>

    <button id="add-button" type="submit">Adicionar</button>
        
        <div id="receiver">
        <form id="form-receiver">
            <fieldset>

            </fieldset>
        </form>
    </div>

JavaScript

var checked = [];

$(function(){
    $('#add-button').click(function(){
            $('.check').each(function(index){
                if($(this).is(':checked'))
                    if(!checked[index]) {
                        $('#form-receiver fieldset').append("<p>" +$(this).parent().text()+ "<input name='" + $(this).parent().text().toLowerCase() + "'></p>");
                        checked[index] = true;
                    }
            });
        });
});