JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="main" class="ui-content">
     <h5 id="date" allign=center> Date of Event : </h5> 
    <ul class="wrapper">
        <div id="box-container-right">
            <li class="box1">
                 <h5 align=left>Cattle</h5>

                 <h5 align=c enter>ID </h5>

                 <h6 align=right> Sahiwal</h6>

            </li>
            <li class="box2">
                 <h5 align=left>Conductivity</h5>

                 <h5 align=c enter>value</h5>

                 <h6 aligh=center>Unit</h6> 
            </li>
            <li class="box3">
                 <h5 align=left>weight<h5>
      <h5 align=center>Value<h5>
      <h6 aligh=right>Kg<h6>
   </li>
</div>
<div id="box-container-left">
    <li class="box4">
      <h5 align=left>Temperature<h5>
      <h5 align=center>Value<h5>
      <h6 aligh=right>Celcius<h6>
    </li>
</div>
</ul>
</div>
<div data-role=footer>
    <button  id="milk" >Milksense</button>
    <button  id="fluid" >Fluidsense</button>
    <button  id="pedo" >Pedosense</button>
    <button  id="weight" >Weightsense</button>
<a href="#" class="ui-btn ui-btn-inline" onclick="logout()">Logout</a>
</div>

CSS

.ui-icon-searchfield::after {
    left: 173px !important;
}
.box1 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto;
    background: #F39;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box2 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto;
    background: #C0C0C0;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box3 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto;
    background: #0F0;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}
.box4 {
    display: inline-block;
    position: relative;
    width: 42%;
    height: auto;
    background: #F60;
    z-index: 0;
    margin: 2px 2px 2px -2px;
    transition: all .15s ease-in-out;
}

JavaScript

$("button").on("click", function () {
    $("#box-container-right").append(
        '<li class="box4">' +
        '<h5 align=left>Temperature<h5>' +
        '<h5 align=center>Value<h5>' +
        '<h6 aligh=right>Celcius<h6>' +
        '</li>');
});