JSFiddle - React, Tailwind, and code Playground

by VixedS

HTML

<div class="form">
	<div class="aForm">
	<input class="address" placeholder="ciao" id="address" name="ciao" />
	</div>
	<div><input class="address" placeholder="pasta" name="pasta" /></div>
	<div><input class="address" placeholder="berlusconi" name="berlusconi" /></div>
	<div><input class="address" placeholder="pizza" name="pizza" /></div>
	<div><input class="address" placeholder="spaghetti" name="spaghetti" /></div>
</div>

CSS

#address{background:#CDF}

JavaScript

$("div.form" ).on("focus", ".address:not('#address')", function() {
    	console.log('ciao');
        address_form = $("#address").parent();
        $("#address").clone(true).prependTo(address_form).removeAttr('id');
        address_name =  $(this).attr('name');
        this_parent = $(this).parent();
        $(this).remove(); $("#address").prependTo(this_parent).attr('name',address_name).val('').focus();
	  
		// just for me
    alert('cloned');
		$("#address").attr('placeholder',$("#address").attr('placeholder')+' --> '+$(this).attr('placeholder'));
		
});