OpenLayers 4 select a feature on click in a list

I have a project where I load a GeoJson map and when I click on it I launch a function, till here everything is Ok, I used the same code in the example.

https://openlayers.org/en/latest/examples/select-features.html

I just add a few extra bit to get the name of the ward

  var areasel = [];

  var select = null;  // ref to currently selected interaction
  var selectSingleClick = new ol.interaction.Select();

  var selectClick = new ol.interaction.Select({
    condition: ol.events.condition.click
  });


  // select interaction working on "pointermove"
  var selectPointerMove = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove
  });

  var selectAltClick = new ol.interaction.Select({
    condition: function(mapBrowserEvent) {
      return ol.events.condition.click(mapBrowserEvent) &&
          ol.events.condition.altKeyOnly(mapBrowserEvent);
    }
  });

  var selectElement = document.getElementById('type');

  var changeInteraction = function() {

    if (select !== null) {
      map.removeInteraction(select);
    }

    var value = selectElement.value;

    if (value == 'singleclick') {
      select = selectSingleClick;
    } else if (value == 'click') {
      select = selectClick;
    } else if (value == 'pointermove') {
      select = selectPointerMove;
    } else if (value == 'altclick') {
      select = selectAltClick;
    } else {
      select = null;
    }

    if (select !== null) {
      map.addInteraction(select);
      select.on('select', function(e) {
        document.getElementById('status').innerHTML = ' ' +
            e.target.getFeatures().getLength() +
            ' selected features (last operation selected ' + e.selected.length +
            ' and deselected ' + e.deselected.length + ' features)';

        if (e.selected.length === 0 && e.deselected.length > 0) {
          for (x = 0; x < e.deselected.length; x++) {
            var int = areasel.indexOf(e.deselected[x].getProperties().Name);
            if(int != -1) {
             areasel.splice(int);
            }
          }
        }

        if (e.selected.length > 0 ) {

        for (i = 0; i < e.selected.length; i++) {
          if (e.deselected.length !== 0 ) {
            for (x = 0; x < e.deselected.length; x++) {
              var int = areasel.indexOf(e.deselected[x].getProperties().Name);
              if(int != -1) {
               areasel.splice(int);
              }
            }
          }
          areasel.push(e.selected[i].getProperties().Name);
        }
      }
          $('#wardsInput').val(areasel);

         if ($('#wardsInput').val() !== "") {
          update();
        } else {
          mainView();
        }

      });
    }
  };
  selectElement.onchange = changeInteraction;
  changeInteraction();

in the website I also create a list(it’s a table) with the wards name displayed in the map, I manage to get the name on click and launch the same function I launch when I click on the wards in the map.

$('.tdclick').on('click', function() {
  $('#wardsInput').val($(this).find('td').first().text());
  update();
});

How can I select the ward in the map when I click on the name of that wards in the table?

Here a screenshot of how it looks

var sel = vectorSource.getFeatureById("la_areas." + s.code);

// empty the selectedFeatures array
for (x = 0; x < selectedFeatures.getArray().length; x++) {
  selectedFeatures.pop();
}

// push the feature
selectedFeatures.push(sel);