JSFiddle - React, Tailwind, and code Playground

HTML

<table id="myTable">
  <tr>
    <th>Fruit</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>apple</td>
    <td>red</td>
  </tr>
  <tr>
    <td>banana</td>
    <td>yellow</td>
  </tr>

CSS

th {
  font-weight: bold;
  width: 4em;
  text-align: left;
}

JavaScript

function findFruitColor(table, fruit) {


  let colKey = $("#myTable th:contains('Fruit')").index();
  let colVal = $("#myTable th:contains('Color')").index();


  $('#myTable tr td:nth-child(' + (colKey + 1) + ')').each(function() {

    if ($(this).text() === fruit) {
      color = $(this).siblings('td').addBack().eq(colVal).text();
      return false;

    }



  })



  // if color was found, display it. 
  if (typeof color !== 'undefined') {
    alert("The color for " + fruit + " is " + color);
  } else {
    alert("No fruit matching that name was found.");
  }




}



// Call the function
findFruitColor("#myTable", "apple");