JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>
            <th><input type="checkbox" name="chooseAllRecipient" id="chooseAllRecipient" /></th>
            <th class="center">Contact Name(s)</th>
            <th class="center">Mobile Number(s)</th>
        </tr>
    </thead>
    
    <tbody id="contacts">
        
    </tbody>
    </table>

JavaScript

$(function(){
   
var data=[
  {
    "Id": "1",
    "Name": "Jane Doe",
    "MobileNumber": "07726465631"
  },
  {
    "Id": "2",
    "Name": "John Doe",
    "MobileNumber": "07726444631"
  },
  {
    "Id": "3",
    "Name": "Json Array",
    "MobileNumber": "07726465631"
  },
  {
    "Id": "4",
    "Name": "Hello World",
    "MobileNumber": "07795465631"
  },
  {
    "Id": "5",
    "Name": "Foo Bar",
    "MobileNumber": "07726498731"
  }
] ;   
    
    var row=""
    $.each(data,function(index,item){
       row+="<tr><td><input type='checkbox'id='"+item.Id+"' name='chooseRecipient' class='my_chkBox' /></td><td>"+item.Name+"</td><td>"+item.MobileNumber+"</td></tr>";
    });
    $("#contacts").html(row);
});