Whenever the '+' button [the addMore() function] is clicked, I want to insert the following div structure. Although I am able to add the div structure, the alignment of the input text is not equal as compared to the hard coded version.
Here is the 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>
<!-- Remaining HTML code -->
And here's the relevant JavaScript function in main.js:
var counter = 0;
function addMore() {
counter++;
// Javascript code to add new div elements goes here
}
This is how the page looks when loaded: when page loaded
You can see the actual and expected results here: actual and expected outcome