JSFiddle - React, Tailwind, and code Playground

HTML

<div id="documents"></div>

CSS

#documents {
    padding: 20px;
}

.item {
    background-color: #dedede;
    padding: 10px;
    margin-bottom: 20px;
}

JavaScript

var docs = [
    {
        docTitle: "onesider number 1",
        docInfo:    "its onesider number 1",
        docSrc: "link here"
    },
    {
        docTitle: "Onesider number 2",
        docInfo:    "its onesider number 2",
        docSrc: "link here"
    }
],
    
// This should be your items container  
container = $('#documents');


$.each(docs,function(i,doc){
    
    // Let's create the DOM
    var item = $('<div>').addClass('item'),
        title = $('<h1>'),
        info = $('<p>'),
        link = $('<a>');
    
    // Add content to the DOM
    link.attr('href',doc.docSrc)
    .text(doc.docTitle)
    .appendTo(title);
    
    info.text(doc.docInfo);
    
    // Append the infos to the item
    item.append(title,info);
    
    // Append the item to the container
    item.appendTo(container);
});