Update DataTable on change

I have a on change event attached to my dataTable which seems to update the dataTable correctly but in the front end, the dropdown value is always set to the first option no matter what option is selected. What am I doing wrong? On change seems to work fine for input. For textarea as well (comments box), the value does not seem to hold.

If I remove on change function, then the front end works just fine (The dropdown option is selected correctly). However, the datatable is not updated. So I need the on change function. As requested, here is the fiddle https://jsfiddle.net/cyzpv42o/3/

DataTable definition

    $('#firstDoseEligibility_table').DataTable({
      "pageLength": 5,
      data: result,
      "columnDefs":[{"targets":[12], render : function(data, type, row, meta) {
        var a = result.indexOf(row);
        var $select = $("<select class = 'browser-default' id='eligible_1st_"+a+"'><option value='Yes'>Yes</option><option value ='Y'>Y</option><option value ='No'>No</option</select>");        
        $("#eligible_1st_"+a).val("");        
        return $select.prop("outerHTML")        
      }},                      
                    {"targets":[13], render : function(ditem){return "<input type='date' value = '" + ditem +"'/>";}},
                    {"targets":[14], render : function(ditem){return "<textarea rows='4' cols='80' value = '" + ditem +"'/>";}}
                   ],
      columns: [
        {"title":"FQM Mine Numer"},
        {"title":"First Name"},
        {"title":"Last Name"},
        {"title":"Company"},
        {"title":"Age"},
        {"title":"Underlying conditions"},
        {"title":"Allergies towards previous vaccines"},
        {"title":"Active COVID-19 infection"},
        {"title":"Date of previous COVID-19 infection"},
        {"title":"No. of Weeks from COVID Diagnosis"},
        {"title":"Pregnant"},
        {"title":"Tier"},
        {"title":"Eligible", "className": ""},
        {"title":"Date to be Vaccinated(1st Dose)", "className": ""},
        {"title":"Comments", "className": ""}
      ]
    });

On change function

  $( '#firstDoseEligibility_table' ).on( 'change', 'input,select,textarea', function () {
    //Get the cell of the input
    var cell = $(this).closest('td');
    //update the input value
    console.log($(this).val());
    $('#firstDoseEligibility_table').DataTable().cell($(cell)).data($(this).val());
    console.log($('#firstDoseEligibility_table').DataTable().rows().data().toArray());
  } );