Dynamically adding and removing div using JQuery?

Question

I'm trying to create a form that allows a user to enter their experience and education

I would like the user to be able to add and remove education or experience.

I am able to do this... sort of. Only the problem is my new divs that I am creating are being appended to the end of the page instead of being appended after the previous div.

These are my scripts:

    $(document).ready(function() {
        var inputs = 1;

        $('#btnAdd').click(function() {
            $('.btnDel:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel').click(function() {
            if (confirm('continue delete?')) {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel').attr('disabled', ($('.clonedInput').length < 2));
            }
        });
    });
    $(document).ready(function() {

        var inputs = 1;

        $('#btnAdd2').click(function() {
            $('.btnDel2:disabled').removeAttr('disabled');
            var c = $('.clonedInput:first').clone(true);
            c.children(':text').attr('name', 'input' + (++inputs));
            $('.clonedInput:last').after(c);
        });

        $('.btnDel2').click(function() {
                --inputs;
                $(this).closest('.clonedInput').remove();
                $('.btnDel2').attr('disabled', ($('.clonedInput').length < 2));
        });
    });

I understand it's bad form to duplicate code like this but I'm not sure how else to else to do it so that clicking the add button doesn't get pressed for the wrong div...

and my html is:

<form id="myForm">
        <h2>Education</h2>
        <p>Please add all of your education</p>
        <div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput">

            Level: <select>
                <option value="secondary">Secondary</option>
                <option value="someps">Some Post Secondary</option>
                <option value="college">College</option>
            </select> <br /> <br />
    Did you receive a degree, diploma or certificate?<br />
        <select>
            <option value="certificate">Certificate</option>
            <option>Diploma</option>
            <option value="degree">Degree</option>
        </select> <br />
        <input type="button" class="btnDel" value="Remove Education" disabled="disabled" />
    </div>
    <div>
        <input type="button" id="btnAdd2" value="add Education" />
    </div>

    <h2>Experience</h2>
    <p>Please add all of your experience</p>
    <div style="margin-bottom: 4px; class="clonedInput">

        Position title: <input type="text"><br /> Years at position:
        <input type="number"><br />
        Responsibilities: <input type="text"><br /> 
        <input type="text"><br /> 
        Type: <select>
            <option>Accounting, banking and Finance</option>
            <option>Publishing & Journalism</option>
            <option>Social Care & guidance work</option>
        </select>
        <input type="button" class="btnDel2" value="Remove Experience"
            disabled="disabled" />
    </div>

    <div>
        <input type="button" id="btnAdd2" value="add Experience" />
    </div>
</form>

Any ideas on how I can fix my script so that when I click the add button for education, a new div containing all of the fields for "education" show up below the previous education box and the same for education?

Any help would be appreciated. Thanks!

Answer 1

Firstly, why do you have 2x $(document).ready? Combine your code into one.

The reason why your duplicated div appear at the end of the form is because both your Education and Experience divs have class="clonedInput", hence $('.clonedInput:last').after(c) causes the duplicated div to be placed after the Experience section (which happens to be the last div that matches the .clonedInput selector).

A solution would to be give each of these sets of divs their own unique class name, such as eduInput and expInput respectively. The corrected code would hence be:

    $('#btnAdd').click(function() {
        $('.btnDel:disabled').removeAttr('disabled');
        var c = $('.eduInput:first').clone(true);
        c.children(':text').attr('name', 'input' + (++inputs));
        $('.eduInput:last').after(c);
    });

for the education div.

To clean up your code, I suggest binding both Add buttons to the same handler, but act upon them differently by checking the target parameter and determining which set (Education or Experience) to duplicate. Such as:

    // single handler and click event for both buttons

    var clickHandler = function (e) {
        // determine which btnAdd was clicked, such as e.getAttribute('id')
    }

    $('.btnAdd').click(clickHandler); 

But seriously you should clean up your code a little.