Here is my code. I want to add more phone number as optional phone. How can I do it dinamically?
<div class="col-12 row border my-2 py-2">
<div class="col-6 form-group">
<label class="control-label " for="official_phone"><h5 class="h6">Phone (Official) *</h5></label>
<input class="form-control" type="text" name="official_phone" placeholder="Input Phone Number.." required/>
</div>
<div class="col-6 form-group">
<label class="control-label " for="optional_phone"><h5 class="h6">Phone (Others) </h5></label>
<input class="form-control" type="text" name="optional_phone" placeholder="Input Phone Number.."/>
</div>
</div>
Just make a button that triggers the input div into the parent form.
let count = 1;
function addphone(){
const parent = document.getElementById("phone-list");
let el = document.createElement("div");
el.setAttribute("class","col-6 form-group");
el.innerHTML = `<label class="control-label " for="optional_phone_${count}"><h5 class="h6">Phone (Optional) *</h5></label><input class="form-control" type="text" name="optional_phone_${count}" placeholder="Input Phone Number.." required/>`;
parent.appendChild(el);
count++;
}<html>
<head></head>
<body>
<div class="col-12 row border my-2 py-2">
<div id="phone-list">
<div class="col-6 form-group">
<label class="control-label " for="official_phone"><h5 class="h6">Phone (Official) *</h5></label>
<input class="form-control" type="text" name="official_phone" placeholder="Input Phone Number.." required/>
</div>
<div class="col-6 form-group">
<label class="control-label " for="optional_phone"><h5 class="h6">Phone (Others)</h5></label>
<input class="form-control" type="text" name="optional_phone" placeholder="Input Phone Number.."/>
</div>
</div>
<button type="button" onclick="addphone()">Add Phone</button>
</div>
</body>
</html>