xxxxxxxxxx1
<div class="container mt-5">2
<button id="append-file-input" class="btn btn-primary mb-5">3
append file input4
</button>5
<form>6
7
<div id="wrapper">8
</div>9
</form>10
11
</div>1
1
xxxxxxxxxx1
const wrapper = document.querySelector('#wrapper')2
const addFileInputButton = document.querySelector('#append-file-input')3
const fileUpload = (counter) => {4
return `5
<div class="form-outline mb-4">6
<input name="input" type="text" class="form-control form-control-lg" id="form_id_variation_options-${counter}" value="css, html, javascript, css" data-blacklist=".NET,PHP">7
<label class="form-label" for="form_id_variation_options-${counter}">Options</label>8
</div>9
`;10
}11
12
addFileInputButton.addEventListener('click', () => {13
wrapper.insertAdjacentHTML( 'beforeend', fileUpload(1) );14
15
document.querySelectorAll('.form-outline').forEach((formOutline) => {16
new mdb.Input(formOutline).init();17
});18
});19
Console errors: 0