Populate html list using jquery and array

Not sure if this is what you mean :

const datas = [{
    legend: "Side Visor",
    imgSrc: "img/side_visor.jpg",
    liContent: "Keeps the rain out and fresh air in with these durable side visors.",
    spanContent: "P 700 ",
    dataContent: "All prices listed herein are Manufacturer’s Suggested Retail Prices (MSRP), which exclude installation, and are subject to change without prior notice. Dealer sets actual price. Pictures are for informational purposes only."
}];
$('#yourNode').append(datas.map(data => `
    <li>
        <div class="col-md-4">
            <div class="acs-detail">
                <legend>${data.legend}</legend>
                <img src="${data.imgSrc}" class="veh-content img-responsive" />
                <div class="pna-description col-md-12">
                    <ul>
                        <li>${data.liContent}</li>
                    </ul>
                </div>
                <div class="pna-price col-sm-6 col-md-12">
                    <div class="text-deco">
                        <span>${data.spanContent}<a   data-placement="top"  data-toggle="popover" data-trigger="hover" data-content="${data.dataContent}"><sup>[*]</sup></a></span>
                    </div>
                    <div class="border">
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
    </li>
`).join(''))

Online : https://codepen.io/cyl19910101/pen/EwedEZ?editors=0011

I would suggest a template approach: create a template, and then clone that template for every item in your list. The strategy I outline below places the template as a literal HTML snippet somewhere in the actual page, but tells the browser (through CSS) to never display the template. (But the template could just as well be a string in Javascript, or pulled in via Ajax, or ...)

The CSS:

.template { display:none !important; }

The HTML:

<!-- HTML snippet, placed wherever you need it -->
<li class="template" id="ProductTemplateRow">
    <div class="col-md-4">
        <div class="acs-detail">
            <legend></legend>
            <img class="veh-content img-responsive" />
            <div class="pna-description col-md-12">
                <ul><li></li></ul>
            </div>
            <div class="pna-price col-sm-6 col-md-12">
                <div class="text-deco">
                    <span></span>
                </div>
                <div class="border">
                    <span></span>
                </div>
            </div>
        </div>
    </div>
</li>

Finally the JS/jQuery code that utilizes the above template:

var $tmpl, $prodRow, i, p, products;

// clone what's on the page so we don't change our template for other
// processing we may need to do
$tmpl = $("#ProductTemplateRow").clone();

// remove the template specific characteristics
$tmpl.removeClass("template").removeAttr("id");

products = [];  // an array of <li> elements, which we append below
for ( i = 0; i < productList.length; ++i ) {
    p = productList[ i ];
    $prodRow = $tmpl.clone();  // create a new product HTML row from the template

    // find the appropriate items in the new product row, and populate them
    $prodRow.find('legend').html( p.legend );
    $prodRow.find('img').attr('src', p.imgSrc);
    // ...

    // then push the product into the list
    products.push( $prodRow );
}


// Finally, put the products wherever they go in the DOM
var $container = $('Selector of ul or ol element into which to put the product <li>s');
$container.append( products );

Obviously, define your array of objects as appropriate.