How to copy entire content of <div> and duplicate it using jquery?

Question

I need a little help here about creating my form.

I am creating a resume form. And I have a part that can add or remove academic background. Here's the scenario.

1. The user will fill up his/her academic information.
2. If the user wants to add another academic information. He/she may click the button '+' below to add another academic field below the first one. The content of the second academic div is the same as the first one.
3. If the user change his/her mind. They can remove the last academic div by clicking the '-' sign. And the initial div will remain in the form.
4. If the user created many academic information. And want to delete a specific academic div. That div will remove and the rest will remain.

That's the scenario. Here's my sample code.

<tr style="background-color: orange">
    <td colspan="2">
        <label style="font-size: 14px">Academic Background</label>
    </td>
</tr>

<div id="academic">

    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Highest Qualification:&nbsp;</label><br /><br /</td>
        <td>
            <select class="form-control" name="highest_qualification[]">
                <?php
                    for($y = 0; $y < sizeof($qualification); $y++){
                        echo "<option value='".$qualification[$y]."'>".$qualification[$y]."</option>";
                    }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Field of study:&nbsp;</label><br /><br /></td>
        <td>
            <select class="form-control" name="field_study[]">
            <?php
                foreach($field_study as $key=> $val){
                    echo "<optgroup label='".$key."'>";
                    foreach ($val as $option) {
                        echo "<option value='".$option."'>".$option."</option>";
                    }
                    echo "</optgroup>";
                }
            ?>
            </select>
        </td>
    </tr>
    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Grade:&nbsp;</label><br /><br /></td>
        <td>
            <select class="form-control" name="grading[]">
                <?php
                    for($g= 0; $g < sizeof($grading); $g++){
                        echo "<option value='".$grading[$g]."'>".$grading[$g]."</option>";
                    }
                ?>
            </select>
        </td>
    </tr>
    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Institute / University:&nbsp;</label></td>
        <td><input type="text" class="form-control" name="university[]" /></td>
    </tr>
    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Located In:&nbsp;</label></td>
        <td><input type="text" class="form-control" name="location[]" /></td>
    </tr>
    <tr>
        <td><label style="font-weight: normal"><label style="color: red">*</label>&nbsp; Graduate Date:&nbsp;</label></td>
        <td>
            <label style="font-weight: normal">Month</label>&nbsp;&nbsp;
            <?php

                $month = array('January','February','March','April','May','June','July','August','September','October','November','December');
                echo "<select name='graduate_month[]'>";
                for($p = 0; $p < sizeof($month); $p++) {
                    echo "<option value='".$p."'>".$month[$p]."</option>";
                }
                echo "</select>";

            ?>
            <label style="font-weight: normal">Day</label>&nbsp;&nbsp;
            <?php

                echo "<select name='graduate_day[]'>";
                for($l = 1; $l <=31 ; $l++) {
                    echo "<option value='".$l."'>".$l."</option>";
                }
                echo "</select>";

            ?>
            <label style="font-weight: normal">Year</label>&nbsp;&nbsp;
            <?php

                echo "<select name='graduate_year[]'>";
                for($u = 2014; $u >= 1978 ; $u--) {
                    echo "<option value='".$u."'>".$u."</option>";
                }
                echo "</select>";

            ?>
        </td>
    </tr>
</div>

<tr>
    <td></td>
    <td>
        <input type="button" value="+" class="btn" name="new_academic"/>
        <input type="button" value="-" class="btn" name="del_academic" />
    </td>
</tr>

I looked for some examples in the Google and what I found is something like this.

<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

$( "div.demo-container" ).html();

This is the example of jquery. The output will be:

<div class="demo-box">Demonstration Box</div>  

How can I apply this code? Can you provide me an example how to do it? Thats all thanks. By the way I am a beginner in jquery that's why I have a difficulty in doing it.

Answer 1

Directly underneath the div with id academic, create a new div with a class that isn't used elsewhere in the application.

When the + button is clicked, clone this newly created div, putting it inside the academic div.

Here is an example http://jsfiddle.net/bbankes/MvgMg/

<div id="academic">
    <div class="uniqueWrapper">
        <div>
            <input name="myInput[]" />
        </div>
        <div>
            <input name="myOtherInput[]" />
        </div>
        <button class="add">+</button>
        <button class="remove">-</button>
    </div>
</div>

$(document).on('click', '.add', function () {
    var form = $(this).parents('.uniqueWrapper').eq(0);
    var formClone = form.clone();
    form.after(formClone);
});

$(document).on('click', '.remove', function () {
    $(this).parents('.uniqueWrapper').eq(0).remove();
});