Add more text fields dynamically using jQuery

Add more than one text fields with the click of a button in jQuery.

First create a div with id=”more”, inside it create an input field and close the div. Then create a button. When we click this button new text fields must be created on web page.

<div id="more">
<input type="text">
</div>
<button>More input fields</button>

Now jQuery part, write button click event and anonymous function. Now create a new variable $i and add html input tag to it. We want to get more input fields when button is clicked in the div with id=”more”. So append the $i to div. Thats it.

$("button").click(function(){
var $i = "<br><input type='text'>";
$("#more").append($i);
});

Let’s look at the full code

<div id="more">
<input type="text">
</div>
<button>More input fields</button>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$("button").click(function(){
var $i = "<br><input type='text'>";
$("#more").append($i);
});
</script>