Aquí está mi código. Quiero agregar más número de teléfono como teléfono opcional. ¿Cómo puedo hacerlo dinámicamente?
<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>Simplemente haga un botón que active el div de entrada en el formulario principal.
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>