CODEWITHSUNDEEP
jqueryhtml
VibuntuNew
VibuntuNew

Reputation: 23

Clone outer div and inner div separately using jquery

I need to clone both main div and section div separately using jquery. 

<div class="container-fluid section">

    <div class="row2">
        <h4>
            Section Details
        </h4>

        <div id="main">
            <div class="row1">

                <div class="control-group">
                    <label for="caption">caption</label>
                    <input name="caption" id="caption" type="text">
                </div>

            </div>
        </div>
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-space main click">Add Main</button>

        </div>
    </div>

</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-space sectionClick">Add Another Section</button>

</div>




 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

So when clicking the "Add Another Section" button it should clone all the section div content without input values and when clicking the Add Main button it should clone only the main detail section without input values. My jquery is as follows.

jQuery(function($){
    var unique_id = 0;
    jQuery('.sectionClick').on('click', function(){

        $(".section .row2:first").clone().find("h4,div,input,select").each(function() {
            this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
            this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
            this.value = '';  //male value empty of new row
            var fieldName = $(this).attr('name');
            $(this).siblings().attr('for', fieldName);
        }).end().appendTo(".section");
        unique_id++;
    });
});

jQuery(function($){
    var unique_id = 0;
    jQuery('.click').on('click', function(){
        $("#main .row1:first").clone().find("input,select").each(function() {

            this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
            this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
            this.value = '';  //male value empty of new row
            var fieldName = $(this).attr('name');
            $(this).siblings().attr('for', fieldName);
        }).end().appendTo("#main");
        unique_id++;

    });
});

It will clone fine for main detail section if you didn't click the "Add Another Section". But when I click the add another section and try to click "Add Main" in the newly created section it will not work. What kind of a solution is there? Any help would be highly appreciated.

Upvotes: 0

Views: 289

Answers (1)

Shivendra Singh
Shivendra Singh

Reputation: 3006

For multiple row use class like 'main_section' instead of id. and when click on 'Add Main' button append the clone to the immediately preceding sibling 'main_section' using $(this).parent().prev()'.

jQuery code for main section will be.

    jQuery(function($){
        var unique_id = 0;
        var appendto = '';
        jQuery(document).on('click', 'button.click', function(){
        var appendto = $(this).parent().prev();
            $(this).parent().prev().find(".row1:first").clone().find("input,select").each(function() {
  -----
    }).end().appendTo(appendto);

Complete code.

 jQuery(function($){
var unique_id = 0;
jQuery('.sectionClick').on('click', function(){
    $(".section .row2:first").clone().find("h4,div,input,select").each(function() {
        this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
        this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
        this.value = '';  //make value empty of new row
        var fieldName = $(this).attr('name');
        $(this).siblings().attr('for', fieldName);
    }).end().appendTo(".section").find('.row1').not(':first').remove(); //append only first row, remove other 
    unique_id++;
});
});

jQuery(function($){
var unique_id = 0;
var appendto = '';
jQuery(document).on('click', 'button.click', function(){
    var appendto = $(this).parent().prev();
    $(this).parent().prev().find(".row1:first").clone().find("input,select").each(function() {

        this.name = $(this).attr("name")+"_"+unique_id; //make name unique of new row
        this.id = $(this).attr("id")+"_"+unique_id; // make id unique of new row
        this.value = '';  //make value empty of new row
        var fieldName = $(this).attr('name');
        $(this).siblings().attr('for', fieldName);
    }).end().appendTo(appendto);
    unique_id++;

});
});

 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 <div class="container-fluid section">
	<div class="row2">
		<h4>
		Section Details
		</h4>
		<div id="main" class="main_section">
			<div class="row1">
				<div class="control-group">
					<label for="caption">caption</label>
					<input name="caption" id="caption" type="text">
				</div>
			</div>
		</div>
		<div class="btn-group" role="group" aria-label="Basic example">
			<button type="button" class="btn btn-space main click">Add Main</button>
		</div>
	</div>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
	<button type="button" class="btn btn-space sectionClick">Add Another Section</button>
</div>

Upvotes: 1

Related Questions