How to add/remove duplicate a set of input fields inside a div tag javascript

Guys iam working with a project, school Management System,

i have a two text boxes inside a div tag, and also have a add button.

if i click the add button another set must be generated, that is the div tag must be duplicated, for entering another set of records with different unique id for that div tag. if user not need that then when the div tag is duplicated with it a delete button must also displayed, if we click that the div tag should be removed or erased.

this is my div tag

<div id="fee" name="fee" class="design1">

<div class="col-sm-6">
    <div class="form-group">
        <label class="control-label">Sub Cat </label>
        <input type="text" name="sub_cat_name[]" id="sub_cat_name[]" class="form-control" />
    </div><!-- form-group -->
</div>

<div class="col-sm-6">
    <div class="form-group">
        <label class="control-label">Amount</label>
        <input type="text" name="sub_cat_amt[]" id="sub_cat_amt[]" class="form-control" />
    </div><!-- form-group -->
</div>

</div>

the label <label class="control-label">Sub Cat </label> must change like sub cat 1, sub cat 2 like that when we click the add button. if needed the div tag can be deleted also.

how this is possible kindly suggest your idea..