JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="place1" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place2" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place3" class="formplacer">
    <button class="getform">Bring form here</button>
</div>

<form id="multiform">
    input
    <input type="text" name="field1" />
    <input type="submit" name="submit" value="sumbit" />
</form>

CSS

.formplacer{
    margin:10px;
    padding:5px;
    border:1px solid #c88;
    width:200px;
}

form{
    width:150px;
    border:1px solid #ccc;
    padding:5px;
}
form input{margin:5px 0;}

JavaScript

var myform = $('#multiform').detach();

$('.getform').click(function(){
    $(this).closest('.formplacer').append(myform);
});