Whenever I click the "add item" button, I want to append a new line (a text input) to the main content. This functionality is working correctly.
However, the issue arises when adding the text input using jQuery. The CSS styling, including width and height properties, is not being applied to the newly added text input. As a result, the text input appears as a default unstyled version rather than the custom styled version I intended.
Below is the relevant HTML code:
<fieldset class="lodging-info-fieldset" id="all_field">
<legend>Gage sur équipement projet</legend>
<div class="panel-heading score_pannel">
<ul class="panel-heading-fieldset">
<li>Désignation</li>
<li>Valeur</li>
</ul>
</div>
<div class="form-group" id="extended">
<div class="col50 left">
<input type="text" class="form-control" id="designation" placeholder="">
</div>
<div class="col50 left">
<input type="text" class="form-control" id="valeur" placeholder="">
</div>
</div>
<div class="form-group">
<div class="add_plus">
<a id="add_pluss" class='add_plus'>add item </a>
</div>
</div>
</fieldset>
And here is my jQuery append function:
addLigne : function(event) {
$("#all_field").append(
'<div class="form-group">' +
'<div class="col50 left">' +
'<input type="text" class="form-control" id="designation">' +
'</div></div>');
},
Can anyone suggest a solution to this problem?
Thank you for your assistance!