JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="0" cellpadding="1" cellspacing="0">
<tbody>
<tr>
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_1" id="event_type_1" tabindex="24" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_1" type="text" id="event_names_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="24">
  </td>
  <td class="padding-right-5">
    <input name="school_1" type="text" id="school_1" class="form-control" style="text-align: left; padding-left:5px;" tabindex="25" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_1" type="tel" id="event_time_score_1" class="form-control responsive-placeholder text-center" tabindex="26" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div class="btn btn-xs btn-primary add-row">
      Add row
    </div>
  </td>
</tr>
<tr style="display: none;">
  <td class="padding-right-5">
    <span class="plain-select">
    <select name="event_type_2" id="event_type_2" tabindex="27" class="form-control" style="padding: 7px 12px;">
      <option value="option_1">Option 1</option>
    </select>
    </span>
  </td>
  <td class="padding-right-5">
    <input name="event_names_2" type="text" id="event_names_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="27">
  </td>
  <td class="padding-right-5">
    <input name="school_2" type="text" id="school_2" class="form-control" style="text-align: left; padding-left:5px;" tabindex="28" value="">
  </td>
  <td class="padding-right-5">
    <input name="event_time_score_2" type="tel" id="event_time_score_2" class="form-control responsive-placeholder text-center" tabindex="29" size="10" maxlength="10">
  </td>
  <td class="padding-right-5">
    <div...

JavaScript

$(function() {
	$('table').on('click', '.hide-row', function(e) {
		console.log('hidden!');
		$( this ).parent().parent().hide();
	});


  $('.add-row').click(function(e) {
  	$( this ).html('Hide').removeClass('add-row').addClass('hide-row');
    $( this ).parent().parent().next().show();
  });


});