JSFiddle - React, Tailwind, and code Playground

by Gulam Jilani

HTML

<table class="table table-striped table-hover table-bordered">
    <thead>
        <tr>

            <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);
    
    $("#add_recipient").click(function(e){
        e.preventDefault();
        $("#contacts input:checkbox:checked").map(function(){
            var contact_number = $(this).closest('td').next('td').next('td').text();
            var id = $(this).attr('id');
            $('#recipientList').append('<option value="'+ id +'">'+ contact_number +'</option>');              
        }).get(); // <----       
    });

    
});