JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<div id="dynamic_const">
  
</div>

<p>Expected output(Static) Below:</p>

<div id="static">
  <ul>
      <li>com_id:12      <span>Apple</span><span>Banana</span></li>
      <li>com_id:91      <span>cake</span><span>cup cake</span></li>
  </ul>
</div>

CSS

span{
  display:inline-block;
  padding:10px;
  margin:2px;
  background:#eee;
  border-radius:20px;
}

JavaScript

var list = [
  {'com_id':12,'text':'Apple'},
  {'com_id':12,'text':'Banana'},
  {'com_id':91,'text':'cake'},
  {'com_id':91,'text':'cup cake'},
];

var dataMap = {}, str = '';

for(var i = 0; i < list.length; i++){
   if(!dataMap[list[i]['com_id']]) {
      dataMap[list[i]['com_id']] = list[i];
      str += '<li>com_id:'+list[i]['com_id']+'    <span>'+list[i]['text']+'</span><span>'+list[i]['text']+'</span></li>';
   }
}

$('#dynamic_const').html(str);