<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h4>Add Field</h4> <form action="return false;"> <input type="text" id="newField" placeholder="Field name" /> <input name="addFieldButton" type="button" value="+" onclick="addField();" /> </form> <h4>Form Preview</h4> <form action="#"> <span id="fields"></span> <p></p> <input type="submit" value="Submit"> </form> </div>

body{ width:960px; margin:45px auto; background-color:#6665ee; } form{ width:330px; border-top:1px dotted #D9D9D9; margin:10px auto } input[type="button"]{ width: 35px; } button{ width:246px; height:40px; color:#4C4C4C; margin-bottom:20px; margin-left:20px } input{ width:250px; padding:5px; margin:10px 0 10px; border-radius:5px; border:4px solid #acbfa5 } input[type = submit]{ width:100px; background-color:#6665ee; border-radius:5px; border:2px solid #4443ea; color:#fff } h4{ color:#4C4C4C; text-align:center } .container{ text-align:center; width:50%; border-left:1px solid #D0D0D0; background-color:#fff; padding-top:40px; padding-bottom:40px; border-radius:5px; margin: 0 auto; }

var fieldId = 0; // used by the addField() function to keep track of IDs function addField() { fieldId++; var newField = document.getElementById('newField'); var html = '<input type="text" placeholder=\'' + newField.value + '\' /> ' + '<input type="button" value="-" onclick="removeEl(\'field-' + fieldId + '\');"/>'; addEl('fields', 'p', 'field-' + fieldId, html); } // Add new element to the form function addEl(parentId, elementTag, elementId, html) { var p = document.getElementById(parentId); var newElement = document.createElement(elementTag); newElement.setAttribute('id', elementId); newElement.innerHTML = html; p.appendChild(newElement); } // Remove exist element from form function removeEl(elementId) { var element = document.getElementById(elementId); element.parentNode.removeChild(element); }