javascript - Clone divs, then fill them with arrays -

with aim speed-up prototyping phase, want clone divs , fill them content stored array.

here generic content needs cloned:

<li class="shots--li">   <img class="image" src="images/dribbble.png">   <h1>title</h1>   <p>description</p> </li> 

i know how clone:

$(document).ready(function() {     var shots = $('.shots--li');     (var j = 0; j < 3; j++) {         shots.clone().insertafter(shots);     } }); 

now problem is, how can replace content of clones? imagine arrays this:

$(document).ready(function() {     var img_src = [         "http://placehold.it/50x60",         "http://placehold.it/50x70",         "http://placehold.it/50x80"     ];     var img_src_array = img_src.split(',');     $.each(img_src_array, function(key,value) {         $('.shots--li img').append.html(value);     });     var title_h1 = [         "some title",         "another title",         "a title?"     ];     var title_h1_array = title_h1.split(',');     $.each(title_h1_array, function(key,value) {         $('.shots--li h1').append(value);     });     var paragraph_p = [         "some description",         "another description",         "a description?"     ];     var paragraph_p_array = paragraph_p.split(',');     $.each(paragraph_p_array, function(key,value) {         $('.shots--li p').append(value);     }); }); 

update: here working fiddle

i don't know if there simple way guys nor if question fill stackoverflow rules since never worked arrays , clones @ same time… great have thoughts.
thanks!

when call $(".shots--li <element>").append(), you're appending all lis, not 1 of them. need select 1 @ time, can .eq(). you're using append incorrectly -- can't append image, because doesn't have child elements. need set src attribute image url. , other element type, want use .html() replace contents, rather .append().

$.each(img_src, function(i, value) {     $(".shots--li img").eq(i).attr("src", value); });  $.each(title_h1, function(i, value) {     $(".shots--li h1").eq(i).html(value); });  $.each(paragraph_p, function(i, value) {     $(".shots--li p").eq(i).html(value); });