JSFiddle - React, Tailwind, and code Playground

HTML

<table>
      <col width="500">
      <col width="100">
      <col width="70">
      <tr>
        <th class="table-header">Boodle Fight</th>
        <th class=" prices table-header">Price</th>
        <th></th>
      </tr>
      <tr class="grey" id="#Silogan">
        <td class="table-subhead">Silogan</td>
        <td class="prices">135 AED</td>
        <td class="add">+</td>
      </tr>
      <tr>
        <td class="description">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
        <td></td>
      </tr>
      <tr class="grey" id="#Isdaan">
        <td class="table-subhead">Isdaan</td>
        <td class="prices">195 AED</td>
        <td class="add">+</td>
      </tr>
      <tr>
        <td class="description" id="#show">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
        <td></td>
      </tr>
      <tr class="grey" id="#Karnefest">
        <td class="table-subhead">Karne Fest</td>
        <td class="prices">195 AED</td>
        <td class="add">+</td>
      </tr>
      <tr>
        <td class="description">Beef Tapa, Longanisa, Chicken Tocino, Scrambled Egg, Daing Na Bangus, Pancit Guisado, Itlog Malat with Insaladang Talong, Garlic Rice, Dessert: Pandan Jelly or Banana Turon. All with cups of Coffee</td>
        <td></td>
      </tr>
    </table>

CSS

body{
  background-color: white;
  font-family: helvetica;
}

table {
  /*width: 700px;*/
  padding-left: 100px;
  padding-top: 50px;
}

h1{
  font-family: helvetica;
  font-weight: 400;
  font-size: 40px;
  text-align: center;
  padding-top: 30px;
  display: block;
}

.hide {
  display: none;
}

.table-header {
  text-align: left;
  padding-bottom: 30px;
  font-size: 30px;
}

.table-subhead {
  font-size: 20px;
  padding: 20px;
  text-decoration: underline;
}

.grey {
  background-color: #f2f2f2;
}

.prices, .add {
  text-align: center;
}

.description {
  display: none;
}

.active {
  display: block;
}

JavaScript

function displayDescription(e, greyHeading){
  // console.log("hello");
  // var desc = e.target.nextSibling.firstChild;
  var desc = e.target.nextSibling.firstChild;
  console.log(e.target);
}

//cache the description elements in an object
var greyHeadings = document.querySelectorAll(".grey");

console.log(greyHeadings);

greyHeadings.forEach(function(greyHeading){
  greyHeading.addEventListener('click', function(e){
    displayDescription(e, greyHeading);
  });
});