JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
<table class="table table-striped table-hover table-bordered" id="tobebookedtable">
<thead>
    <tr>
        <th>Address</th>
        <th>Postcode</th>
        <th>Planned</th>
        <th>TimeSlot</th>
        <th>ByWho</th>
    </tr>
</thead>
<tbody>
    <tr id="id1">
        <td>Adress1</td>
        <td>Postcode1</td>
        <td id="planned1">Planned1</td>
        <td id="timeSlot1">TimeSlot1</td>
        <td id="byWho1">ByWho1</td>
    </tr>
    <tr id="id2">
        <td>Adress2</td>
        <td>Postcode2</td>
        <td id="planned2">Planned2</td>
        <td id="timeSlot2">TimeSlot2</td>
        <td id="byWho2">ByWho2</td>
    </tr>
    <tr id="id3">
        <td>Adress3</td>
        <td>Postcode3</td>
        <td id="planned3">Planned3</td>
        <td id="timeSlot3">TimeSlot3</td>
        <td id="byWho3">ByWh3</td>
    </tr>
    <tr id="id3">
        <td>Adress3</td>
        <td>Postcode3</td>
        <td id="planned3">Planned3</td>
        <td id="timeSlot3">TimeSlot3</td>
        <td id="byWho3">ByWho3</td>
    </tr>
</tbody>
</table>

CSS

table, table tr, table td{
    border:1px solid black;
}

JavaScript

$('#tobebookedtable').dataTable( {
//for each generated row
"createdRow": function( row, data, dataIndex ) {
    //create the dropdown
    var myDropDown = $('<select><option value=""></option><option value="Yes">Yes</option><option value="No">No</option></select>');
    //bind this dropdown with the JS object used by dataTable
    myDropDown.on("change",function(){
        data.who = $(this).val();
        console.log(data);
    });
    //inject this dropdown in the desired column
    $(row).find("td:eq(4)").html(myDropDown);
},
    "columns": [
            { "data": "adress" },
            { "data": "postcode" },
            { "data": "planned" },
            { "data": "timeslot" },
            { "data": "who" }
        ]
});