Jquery clone name attribute increase-CodePudding

I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones

Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)

<div id="addDriverContent" style="display:none;">
    <div >
        <div >
            <div >
                <label for="description" >Item Description:</label>
                <input type="text"  id="description" name="description" placeholder="Enter the items description"/>
            </div>
        </div>
    </div>
</div>

<button type="button"  id="clone_button">Add another item</button>
                            
<div id="clone_wrapper"></div>

<script type="text/javascript">
    $(function($) {

        var max_fields        = 4; 
        // origin selector would select all the first div ancestors.
        var $content          = $("#addDriverContent > .content");     
        var $clone_wrapper    = $("#clone_wrapper") ;
        var $add_button       = $(".add_field_button"); //Add button ID
        

        $add_button.click(function(e) {
            e.preventDefault();
            var counter = 0;
            // jquery object is array liked object. Length mean how many elements is selected.
            if ( $clone_wrapper.children(".content").length < max_fields ) 
            
            $content.clone().appendTo($clone_wrapper);
        });
        
        $clone_wrapper.on("click",".remove_field", function(e){ 
            e.preventDefault(); 
        
            // this would be more specific.
            $(this).parent(".content").remove(); 
        })
        
    });
 </script>

CodePudding user response：

As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
    <div >
        <div >
            <div >
                <label for="description" >Item Description:</label>
                <input type="text"  id="description" name="description" placeholder="Enter the items description"/>
<input type="text"  id="fname" name="fname"/>
                <a href="#" >Remove</a><button type="button"  id="clone_button">Add another item</button>
            </div>
        </div>
    </div>
</div>

<button type="button"  id="clone_button">Add another item</button>
                            
<div id="clone_wrapper"></div>

<script type="text/javascript">
    $(function($) {
    
    

        var max_fields        = 4; 
        // origin selector would select all the first div ancestors.
        var $content          = $("#addDriverContent > .content");     
        var $clone_wrapper    = $("#clone_wrapper") ;
        var $add_button       = $(".add_field_button"); //Add button ID
        

        $(".add_field_button").click(function() {
            //e.preventDefault();
            //var counter = 0;
            // jquery object is array liked object. Length mean how many elements is selected.
            if ( $clone_wrapper.children(".content").length < max_fields ) {
            
            $content.clone().appendTo($clone_wrapper);
            //$add_button.clone().appendTo($clone_wrapper);// mine
            
            $(".description").each(function(index) { 
            $( this ).attr('name', 'description' index)
            });
            
            $(".fname").each(function(index) { 
            $( this ).attr('name', 'fname' index)
            });
          
         
            }

           
        });
        
        
                $(document).on('click', "#clone_wrapper .add_field_button", function () {
            $('#addDriverContent   .add_field_button').trigger('click');
})
          $(document).on('click', ".remove_field", function () {
            //e.preventDefault(); 
        
            // this would be more specific.
            $(this).closest(".content").remove(); 
        }); 
        
        
   
        
        
    });
 </script>