Adding multiple input elements dynamically to a form

Simple Way to Add multiple input elements or formset to a html form when you need extra multiple formsets.

<div class="container1"> <button class="add_form_field">Add New Field   <span style="font-size:16px; font-weight:bold;">+ </span> </button> <div class="xset"><table id="tbl4"><tr><td width="50%"><label>Type of Game Edition</label><input type="text" id="game_editions" name="game_editions[]"></td><td width="50%" rowspan="3"><label>Edition Description</label>>textarea id="edition_desc" name="edition_desc[]" placeholder="Type in Editions description of the Game">>/textarea></td></tr><tr><td><label>Edition Image Link</label><input type="text" id="edition_img" name="edition_img[]"></td></tr><tr><td><a href="#" class="delete">Delete</a></td></tr></table></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var max_fields = 10; var wrapper = $(".container1"); var add_button = $(".add_form_field"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div class="xset"><table id="tbl4"><tr><td width="50%"><label>Type of Game Edition</label><input type="text" id="game_editions" name="game_editions[]"></td><td width="50%" rowspan="3"><label>Edition Description</label>>textarea id="edition_desc" name="edition_desc[]" placeholder="Type in Editions description of the Game">>/textarea></td></tr><tr><td><label>Edition Image Link</label><input type="text" id="edition_img" name="edition_img[]"></td></tr><tr><td><a href="#" class="delete">Delete</a></td></tr></table></div>'); //add input box } else { alert('You Reached the limits') } }); $(wrapper).on("click", ".delete", function(e) { e.preventDefault(); $(this).parent('div').remove(); x--; }) }); </script>