JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listItem">

</div>

JavaScript

var data = [
  {item_name: 'Book', stock: 15},
  {item_name: 'Pencil', stock: 15},
  {item_name: 'Paper', stock: 3}
];
data.unshift( {item_name: 'new', stock: 10});
console.log(data);
var html='';
data.forEach(function(element,index,array){
    html += '<li class="list-group-item" id="listGroup">'+data[index].item_name+'<span class="badge">'+data[index].stock+'</span></li>';
$('#listItem').html(html);
});