JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<label for="field_a">欄位A </label><input type="text" name="field_a" id="field_a" />
<label for="field_b">欄位B </label><input type="text" name="field_b" id="field_b" />
<label for="field_c">欄位C </label><input type="text" name="field_c" id="field_c" />
<label for="field_d">欄位D </label><input type="text" name="field_d" id="field_d" />

<div id="contact">
    <fieldset>
        <legend>聯絡人資訊</legend>
        姓名 <input type="text" name="" id="" />
        電話 <input type="text" name="" id="" />
        Email <input type="text" name="" id="" />
        <hr />
        <button class="add">Add</button>
    </fieldset>    
</div>


<div class="form_inf hide">
    <fieldset>
        <legend>聯絡人資訊</legend>
        姓名 <input type="text" name="" id="" />
        電話 <input type="text" name="" id="" />
        Email <input type="text" name="" id="" />
        <hr />
        <button class="add">Add</button>
        <button class="del">Del</button>
    </fieldset>
</div>

CSS

.hide { display: none; }
input[type="text"] {
    display: block;
    margin: 0.5em 0;
}
label{
    float: left;
    width: 60px;
    text-align: center;
}
fieldset{
    width: 400px;
    margin: 1em 0;
    border:1px solid #000;
}

JavaScript

var inf_area = $("div.form_inf").html();

$("#contact button.add").live('click', function(e) {
    $("div#contact").append(inf_area);
    $("div#contact > fieldset:last").children("legend").append(' ' + $("div#contact > fieldset").length);

});

$("#contact button.del").live('click', function(e) {
    $(this).parent("fieldset").remove();
});