I made some inputs in Django, they work fine, the problem occurs when I use Javascript, it happens that I need my dynamically generated inputs to have CSS classes, especially I need them to have the col-md-4 class so they don't look huge.
To illustrate the example, these inputs have the style and order that I want
When clicking the add button, they generate the same inputs as above since they are being cloned (I only cloned 2 to do a test, later I will clone the other original inputs), if you notice they are out of whack, and they do not have the CSS classes to give you a better view.
Does anyone have an idea what I can use to solve this problem? I add my code in Javascript and HTML. Thank you
function addFormset() {
//take id total forms
let forms=document.querySelector('#id_form-TOTAL_FORMS');
//create a div col-md-4 inside
//take id_form-0-representative and clone it
let newinput=document.querySelector('#id_form-0-representative').cloneNode(true);
//create new name with the current value
newinput.name='form-'+forms.value+'-representative';
//create new id with the current value
newinput.id='id_form-'+forms.value+'-representative';
console.log({newinput});
//take id_form-0-nameRepresentative and clone it
var newselect=document.querySelector('#id_form-0-nameRepresentative').cloneNode(true)
//create new name with the current value
newselect.name='form-'+forms.value+'-nameRepresentative';
//create new nameRepresentative with the current value
newselect.id='id_form-'+forms.value+'-nameRepresentative';
console.log({newselect});
//take representative formset's id and APPENDCHILD
//put new class name
newinput.className='form-control';
newselect.className='form-control';
document.querySelector('#Representativeformset').appendChild(newinput);
document.querySelector('#Representativeformset').appendChild(newselect);
forms.value=parseInt(forms.value)+1;
}
<input type="hidden" name="form-TOTAL_FORMS" value="2" id="id_form-TOTAL_FORMS"><input type="hidden" name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS"><input type="hidden" name="form-MIN_NUM_FORMS" value="0" id="id_form-MIN_NUM_FORMS"><input type="hidden" name="form-MAX_NUM_FORMS" value="1000" id="id_form-MAX_NUM_FORMS">
<div class="row" id="Representativeformset">
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Representative</label>
<input type="text" name="form-0-representative" class="form-control" maxlength="200" id="id_form-0-representative">
</div>
</div>
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Name</label>
<input type="text" name="form-0-nameRepresentative" class="form-control" maxlength="200" id="id_form-0-nameRepresentative">
</div>
</div>
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Department</label>
<input type="text" name="form-0-department" class="form-control" maxlength="10" id="id_form-0-department">
</div>
</div>
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Phone Representative</label>
<input type="text" name="form-0-phoneRepresentative" class="form-control" id="id_form-0-phoneRepresentative">
</div>
</div>
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Email Representative</label>
<input type="text" name="form-0-emailRepresentative" class="form-control" maxlength="20" id="id_form-0-emailRepresentative">
</div>
</div>
<div class="col-md-4">
<div class="mb-3 only-corp hide-item">
<label>Notes</label>
<input type="text" name="form-0-notesRepresentative" class="form-control" maxlength="200" id="id_form-0-notesRepresentative">
</div>
</div>
<div class="row">
<div id="FormsetContainer" class="col-md-4">
<div class="mb-3 only-corp hide-item" id="onlyCorp">
</div>
</div>
</div>
<button type="button" onclick="addFormset()">Add</button>
<input type="text" name="form-1-representative" class="form-control" maxlength="200" id="id_form-1-representative"><input type="text" name="form-1-nameRepresentative" class="form-control" maxlength="200" id="id_form-1-nameRepresentative">
</div>
</div>
<button class="btn btn-primary mb-3" type="submit" value="Post">Save</button>
Just below .appendChild, just add the classes you want to it. Example:
newinput.classlist.add('laClaseQueQuieras');
the "col-md-4" class is in the div in your HTML, the inputs have a "form control" class, have you tried adding that class to them?