JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div id="container"></div>

JavaScript

$(function(){
var data = [{"id":0,"name":"sample0","rating":2,"rate":1295,"veg":1,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":1,"name":"sample1","rating":4,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":2,"name":"sample2","rating":0,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":3,"name":"sample3","rating":3,"rate":1295,"veg":0,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"},{"id":4,"name":"sample4","rating":2,"rate":1295,"veg":1,"url":"http:\/\/www.domain.com\/Web_Service\/pic10.jpg"}];
     var html = '';
    
     $.each(data, function( index, value){
            var cls = (value.veg==0) ? 'green' : 'red';
   
            html += '<div class="normal_add_item_box left" id="normal_add_item_box">\
                <div class="nm_image_area" id="nm_image_area"><img src="'+value.url+'">\
                    <div class="edit_box" id="edit_box">\
                        <div class="ed_del_icons" id="ed_del_icons">\
                            <i class="icon-pencil hover_icons" id="nm_edit"></i>\
                            <i class="icon-trash hover_icons" id="nm_delete"></i>\
                        </div>\
                    </div>\
                </div>\
                <div class="veg_nv '+cls+'" id="veg_nv">\
                    <div></div>\
                </div>\
                <div class="nm_name_area" id="nm_name_area">'+value.name+'</div>\
                <div class="nm_price_area" id="nm_price_area"><i class="icon-inr rupee"></i>'+value.rate+'</div>\
            </div>';
        });
        $('#container').html(html); 
});