CODEWITHSUNDEEP
javascriptjqueryhtml
tenten
tenten

Reputation: 1274

Appending clone to a div by for loop not working

Below javascript code is for cloning the clonedInput1. But below code only creating and appends one clone. But year_no is 3.

cloneid = 0;
function clone_year(year_no)
{
    cloneid += 1;
    var container = document.getElementById('clone_div');
    var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('.clone_div').append(clone);
    }
}

This is the html code for above code.

<div id="year_sem_details" style="display:none">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">
                <div class="row">
                    <!-- here some html -->
                </div>
            </div>
        </div>
    </div>
</div>

Please Help me on this.

Upvotes: 1

Views: 418

Answers (4)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/u5zw67v3/

cloneid = 1;
function clone_year(year_no) {
  for (i = 0; i < year_no; i++) {
    cloneid++;
    $('.clone_div').append($('#clonedInput1').clone());
    $('.clone_div').find('.clonedInput').last().attr('id', 'clonedInput' + cloneid);
  }
}

clone_year(3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">
                <div class="row">
                    here some html
                </div>
            </div>
        </div>
    </div>
</div>

Your id should be unique.

Hope this will help you.

Upvotes: 1

Koby Douek
Koby Douek

Reputation: 16693

Try using an ID selector like $('#clonedInput1').clone() so you will append a new element on each iteration:

function clone_year(year_no)
{
    var container = document.getElementById('clone_div');
    var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('#clone_div').append($('#clonedInput1').clone());
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
    <div class="clone_div" id="clone_div">
        <div id="clonedInput1" class="clonedInput row">
            Hello
        </div>
    </div>
</div>

<input type='button' onclick='clone_year(3);' value='go' />

Upvotes: 1

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

You're appending the same element (clone) to $('.clone_div'). For each iteration, clone a new element.

for (i = 0; i < year_no; i++) {
    $('.clone_div').append($('#clonedInput1').clone());
}

Upvotes: 1

Garfield
Garfield

Reputation: 2537

cloneid = 0;
function clone_year(year_no)
{
    cloneid += 1;
    var container = document.getElementById('clone_div');
    //var clone = $('#clonedInput1').clone();
    for (i = 0; i < year_no; i++) {
        $('.clone_div').append($('#clonedInput1').clone());
    }
}

clone_year(3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details" style="display:block">
    <div class="form-group">
        <div class="clone_div" id="clone_div">
            <div id="clonedInput1" class="clonedInput row">1
                <div class="row">
                    <!-- here some html -->
                </div>
            </div>
        </div>
    </div>
</div>

Please check this.

Upvotes: 1

Related Questions