I am building a form in which the user can add fields by clicking on an "add" button. The problem is that these fields are inside a list, which has a css, but when more are added, they appear without the original styles that I put in the form. To explain myself better, I leave you a demo of the site I'm making: http://kickads.mobi/prevem/
There you can see the error I'm referring to. What I need is the code or to know what to do so that when I add more fields when clicking on the button, they respect the styles they have in the form.
I also leave my code:
$(function() {
$("#addMore").click(function(e) {
e.preventDefault();
$("#fieldList").append("<li> </li>");
$("#fieldList").append("<li><input type='text' name='namehijos[]' placeholder='Nombre/s' /></li>");
$("#fieldList").append("<li><input type='number' name='age[]' placeholder='Edad' /></li>");
$("#fieldList").append("<li><input type='text' name='gender[]' placeholder='Género' /></li>");
});
});
.lista {
display: inline;
width: 100%;
}
.sonli {
float: left;
width: 30%;
}
.first {
width: 32%;
}
.second {
margin-left: 4%;
}
<ul id="fieldList" style="padding: 0;list-style: none; overflow: hidden">
<li class="sonli first">
<label for="sons" class="radio-label">Nombre:</label>
<input class="lista" name="namehijos[]" type="text" placeholder="Nombre/s" />
</li>
<li class="sonli second">
<label for="sons" class="radio-label">Edad:</label>
<input class="lista" name="age[]" type="number" placeholder="Edad" />
</li>
<li class="sonli second">
<label for="sons" class="radio-label">Género:</label>
<input class="lista" name="gender[]" type="text" placeholder="Género" />
</li>
</ul>
<button id="addMore" class="btn btn-large btn-success add" type="button">
Agregar</button>