Question

I have a fiddle

code:

//create array with values
thisArray= ['',[]];
thisArray[0] = ['numbers',['one','two','three','four','five']];
// have a clean clone of input
var newElem = $('#input').clone();

//search through aray and print the nested array inside the
//   value of the cloned input
for(i = 0; i<thisArray[0][1].length; i++){

    $(newElem).val(thisArray[0][1][i]);
    $('input.input').last().after(newElem);
}

Conditions: I cannot change the HTML or layout of the array.

Question: how can i edit the for loop to display the numbers in the array one after another inside the cloned input field? so the final output will be six input fields with a number in each except the first one.

Answer 1

You need to make five copies in order to insert five new inputs:

//create array with values
thisArray= ['',[]];
thisArray[0] = ['numbers',['one','two','three','four','five']];

var newElem;

//search through aray and print the nested array inside the value of the cloned input
for(var i = 0; i<thisArray[0][1].length; i++){
    newElem = $('.input').eq(0).clone();    // <-- cloning moved here!
    newElem.val(thisArray[0][1][i]);
    $('input.input').last().after(newElem);
}

See http://jsfiddle.net/7NHXf/4/
​