JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<table class="table dataList fiberEngg">
<tr>
<td>
<div class="row noPadding">
<div class="col-xs-6 colPadding">
MHBHNDMUNVMBSPN006_BU
<a class="button"><i class="fa fa-map-marker" aria-hidden="true"></i></a><a class="button"><i class="fa fa-list" aria-hidden="true"></i></a>
</div>
<div class="col-xs-6 colPadding">
<p><strong>Request Id :</strong>053214</p>
<p><strong>Last Updated by :</strong>Sameer Parab</p>
<p><strong>Status :</strong>Partial HOTO with Partial LIT</p>
<p><strong>Pending Since :</strong>1 Day</p>
</div>
</div>
</td>
</tr>
</table>

CSS

.fiberEngg{
  width:100%;
  border-collapse: collapse;
}
.fiberEngg > tbody > tr > td {
  border:1px solid red;
  padding:5px
}

JavaScript

var data = [
        {
            "SPAN_ID": "GJVAPIMHKAKHSPN003_BU",
            "MAINTENANCEZONECODE": "INMUMIBH01",
            "REQ_ID": 4.0,
            "LAST_UPDATE_BY": "HARDIK1.SHAH",
            "STATUS_NAME": "HOTO without LIT",
            "PENDING_DAYS": 7.0
        },
         {
            "SPAN_ID": "WDASDF@R#&^@I",
            "MAINTENANCEZONECODE": "WKUYTEISA",
            "REQ_ID": 4.0,
            "LAST_UPDATE_BY": "TEST",
            "STATUS_NAME": "OK",
            "PENDING_DAYS": 7.0
        }
    ];

    var datatojson = JSON.stringify(data);
    var parsedata = jQuery.parseJSON(datatojson);
    
    // this is your code 
    // $('.fiberEngg .fa-list').on('click', function () { 
    //		 alert("can click me");
    // });
    
    // change to  
    $(document).on('click','.fiberEngg .fa-list', function () { 
    		 alert("Clicked");
    });
    
    var my_table = $(".fiberEngg"); 
   	my_table.empty();
    
    $.each(parsedata,function( key, val ){
        var my_tr = "<tr>"
            + "<td>"
            + "<div class='row noPadding'>"
            + "<div class='col-xs-6 colPadding'>"
            + val.SPAN_ID
            + "<a class='btn'><i class='fa fa-map-marker' aria-hidden='true'></i></a><a class='btn'><i class='fa fa-list' aria-hidden='true'></i></a>"
            + "</div>"
            + "<div class='col-xs-6 colPadding'>"
            + "<p><strong>Request Id :</strong>" + val.REQ_ID + "</p>"
            + "<p><strong>Last Updated by :</strong>" + val.LAST_UPDATE_BY + "</p>"
            + "<p><strong>Status :</strong>" + val.STATUS_NAME + "</p>"
            + "<p><strong>Pending Since :</strong>" + val.PENDING_DAYS + "</p>"
            + "</div>"
            + "</div>"
            + "</td>"
            + "</tr>";

        my_table.append(my_tr); 
    });