create multi div element in jquery - element

Question

I want to create a function that creates several boxes for me by capturing the title, text, photo, link and text of the link. That these values ​​change, but the overall shape of the boxes is a model
each div contain with Different values ​​taken by jquery codes:
<div>
<img></img>
<h3></h3>
<p></p>
<a><span></span></a>
</div>
i try it but not complete and not work:
$(document).ready(function () {
var newDiv = document.getElementById("reports-box");
function makenewDivBox(options) {
var div = document.createElement("div");
for (var i = 0; i < options.length; i++) {
var div = document.createElement("div");
var img = document.createElement("img");
var title = document.createElement("h3");
var description = document.createElement("p");
var link = document.createElement("a");
var linkText = document.createElement("span");
img.id = img1;
img.type = "img";
img.src = options[i].src;
title.id = Title1;
title.type = "h3";
title.text = options[i].text;
description.id = des1;
description.type = "p";
description.text = options[i].text;
link.id = link1;
link.type = "hrefa";
link.text = options[i].text;
linkText.id = des1;
linkText.type = "hrefa";
linkText.text = options[i].text;
div.appendChild(img)
div.appendChild(title)
div.appendChild(description)
div.appendChild(link)
div.appendChild(linkText)
}
newDiv.appendChild(div);
}
var options1 = [{
title="t1",
img: "url('image/j1.png')",
description: "content1",
link: "www.link1.com",
linkText: "click here"
}]
var options2 = [{
title="t2",
img: "url('image/j2.png')",
description: "content2",
link: "www.link2.com",
linkText: "more here"
}]
var options3 = [{
title="t3",
img: "url('image/j3.png')",
description: "content3",
link: "www.link3.com",
linkText: "report here"
}]
var options4 = [{
title="t4",
img: "url('image/j4.png')",
description: "content4",
link: "www.link4.com",
linkText: "more details here"
}]
makenewDivBox(options1);
makenewDivBox(options2);
makenewDivBox(options3);
makenewDivBox(options4);
});

Answer 1

I was able to solve it myself.
I'll put the code here, maybe it will be useful for someone:
in html:
<div class="rowReports"></div>
in jquery:
$(document).ready(function () {
var Titels = [
"title1",
"title2",
"title3",
"title4",
"title5",
"title6",
"title7",
"title8"
];
var imgSrces = [
"/FrontEnd/media/image/Nashriyat.png",
"/FrontEnd/media/image/plan.png",
"/FrontEnd/media/image/majameElmi.png",
"/FrontEnd/media/image/kargahAmuzeshi.png",
"/FrontEnd/media/image/targoman.png",
"/FrontEnd/media/image/scoma.png",
"/FrontEnd/media/image/elmsanji.png",
"/FrontEnd/media/image/tablighat.png"
];
var Descriptions = [
"Desc1",
"Desc2 ",
"Desc3",
"Desc4",
"Desc5",
"Desc6",
"Desc7",
"Desc8",
"Desc9"
]
var Links = [
"/Page/frmDefault1.aspx",
"/Page/frmDefault2.aspx",
"/Page/frmDefault3.aspx",
"/Page/frmDefault4.aspx",
"/Page/frmDefault5.aspx",
"/Page/frmDefault6.aspx",
"/Page/frmDefault7.aspx",
"/Page/frmDefault8.aspx"
];
var TextLinks = [
"more report",
"send email",
"more details",
"join group",
"more info",
"add number",
"more",
"continue"
];
for (i = 0; i<Titels.length; i++)
$('.rowReports').append(
$('<div/>')
.attr("id", "newDiv"+i)
.addClass("newDiv reports-box bloated")
.append(' <a href="' + Links[i] + '">' +
'<img class="servicesPic" alt="info" src="' + imgSrces[i] + '"/>' + '<h3>' + Titels[i] + '</h3>' +
'<p>' + Descriptions[i] + '</p>' +
'<span>' + TextLinks[i] + '</span>'+ '</a>'
)
);
});