Clone form elements

  • STEPS

    Html

    
    
                    <span class="Add">Add New +</span>
                    <div class="all">
                      <form class="formi">
                        <input type="text" placeholder="name" value="Sarah" />
                        <select name="cars">
                          <option value="one">one</option>
                          <option value="two">two</option>
                        </select>
                        <button type="submit">ok</button>
                        <span class="cancel">Cancel</span>
                      </form>
                    </div>
    
                    

    Jquery

    
    
                    $(document).ready(function() {
                        $(".Add").click(function() {
                          
                            $(".formi")
                              .eq(0)
                              .clone()
                              .find("input").val("").end() // ***
                              .show()
                              .insertAfter(".formi:last");
                          
                        });
    
    
                        $('.all').on('click', ".cancel", function() {
                          $(this).closest('.formi').remove();
                        });
    
    
                    });