JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#container {
    width: 300px;
    height: 300px;
}
.main {
    width: 300px;
}
.top, .left, .right {
    border: 1px solid red;
}
.top, .bottom {
    width: 100%;
}
.left, .right {
    padding: 5px;
    float: left;
    width: 138px;
    height: 100px;
}

JavaScript

$(function(){
    $('button').click(function(){
        $.ajax({
            type: 'GET',    //设置调用类型  
            async: false,
            dataType: 'json',   //设置数据类型  
            url: '/echo/json/',    //url  
            data: data,
            success: function (obj) {
                var obj = JSON.parse(data);
                var count = obj.total;
                //   alert(eval(obj.rows[0].BlenderCurrent));
                for (var j = 0; j < count; j++) {
                    createDiv(obj.rows[j]);
                }
            }
        });
    });    
});

var data = '{"total": 2, "rows": [{"id":1, "t1":10, "t2":20}, {"id":2, "t1":15, "t2":25}]}';

function createDiv(data) {
    var html = '<div class="main">' +
        '<div class="top"><p>'+data.id+'</p></div>' +
        '<div class="bottom">' +
        '<div class="left"><p>槽温</p><span class="sp1">'+data.t1+'</span></div>' +
        '<div class="right"><p>缸温</p><span class="sp1">'+data.t2+'</span></div>' +
        '<div style="clear:both;"></div>' +
        '</div>' +
        '</div>';
    $(html).appendTo('#container');
};