JSFiddle - React, Tailwind, and code Playground

by chepe263

HTML

<div id="basicAdress">
<div class="addressContainer">
    <p><label>Address</label><input type="text" class="txtAddress"/> <input type="button" class="remove " value="Remove" /></p>    
</div>
</div>

<div id="manyAddress">
    
</div>
<div>
    <input type="Button" id="addMore" value="Add more" />
    <input type="button" value="Send address" id="sendAddress" />
</div>

<div id="outputAddress">
</div>

CSS

#basicAdress, #manyAddress .addressContainer:first-child .remove{
    display: none;    
}

JavaScript

jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');


jQuery('#manyAddress').on('click','.remove',function(){
    
    jQuery(this).parent().parent().remove();
});

jQuery('#addMore').click(function(){
    jQuery('#basicAdress .addressContainer:eq(0)').clone().appendTo('#manyAddress');
});

jQuery('#sendAddress').click(function(){
    jQuery('#outputAddress').html('');
    jQuery('#manyAddress .addressContainer').each(function(i, v){
        jQuery('#outputAddress').append(
            "<p>" + (i+1) + '. ' + jQuery(this).children().find('.txtAddress').val()+ "</p>"
        );
    });
});