JSFiddle - React, Tailwind, and code Playground

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>
<button id="add_recipient">Add Selected Recipients</button>
<select id="recipientList"></select>

JavaScript

$(function(){
   
var data=[
  {
    "Id": "1",
    "Name": "Jane Doe",
    "MobileNumber": "2"
  },
  {
    "Id": "2",
    "Name": "John Doe",
    "MobileNumber": "2234"
  },
  {
    "Id": "3",
    "Name": "Json Array",
    "MobileNumber": "2"
  },
  {
    "Id": "4",
    "Name": "Hello World",
    "MobileNumber": "345"
  },
  {
    "Id": "5",
    "Name": "Foo Bar",
    "MobileNumber": "34"
  }
] ;   
    
    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(); // <----       
    });

    
});