How to add <div> in <form> on button click html and jquery

Question

I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.

html file:

<form class="align-center">
            <p class="6u 12u$(medium)">
                    Start Date: <input type="date" name="startdate" id="startdate" /> 
                    End Date: <input type="date" name="enddate" id="enddate" />
            </p>
            <p>
               <div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
            </p>
            <p>
                <div class="row">
                        <div class="3u 12u$(medium)">
                            <div class="select-wrapper">
                                <select>
                                    <option value="">-Select Programme-</option>
                                    <option value="1">Yogalates</option>
                                    <option value="2">Pilates</option>
                                    <option value="3">Kick Boxing</option>
                                    <option value="4">K-Pop Dance</option>
                                    <option value="5">Hip Hop</option>
                                    <option value="6">Jazz Aerobics</option>
                                    <option value="7">Zumba</option>
                                    <option value="8">Fitball</option>
                                </select>
                            </div>
                        </div>
                    <div>OR</div>
                    <div class="3u 12u$(medium)">
                            <div class="12u$">
                                <input type="text" value="" placeholder="Customize your own programme" />
                            </div>
                    </div>
                    <div class="2u 12u$(medium)">
                        <div class="12u$">
                            <input type="text" value="" placeholder="Venue" />
                        </div>
                    </div>
                </div>  
            </p> 
            <p>
                <div class="row" id="newProg">
                </div>
                <div class="row">
                    <div class="2u 12u$(medium)">
                        <a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
                        <a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
                    </div>
                </div>
                <div class="2u 12u$(medium); image right">
                    <a href="#popup1" class="button">Submit</a>
                </div>
            </p>                              
    </form>

main.js

    var counter = 0;
function addMore() {
        counter++;
        var objNewDiv = document.createElement('div');
        objNewDiv.setAttribute('id', 'addProg' + counter);
        objNewDiv.setAttribute('class', 'row');
        objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
        document.getElementById('newProg').appendChild(objNewDiv);
}

Result when page is loaded: when page loaded

Actual and Expected result: actual and expected outcome

Answer 1

You missed one of your divs in JavaScript inner HTML string. I think it should be like this:

objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';

Answer 2

You have differenc in the class names of the div tags which you are appending in jquery.

Make it same as the Static HTML content, And the expected result will be achieved.

Differences I see is as below.

Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">

Static HTML has - <div class="3u 12u$(medium)"> , Your jquery HTML has - <div class="5u 12u$(medium)">

Static HTml has - <div class="2u$ 12u$(medium)"> , Your Jquery HTML has <div class="3u$ 12u$(medium)">

Because of the differences in the class names you find the differences in the way its rendered in the UI.