JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <table id="table" class="table table-hover table-striped" style="margin-top: 0px;">
        <thead>
          <tr>
            <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
            <th style="" data-field="id" tabindex="0"><div class="th-inner ">Item ID</div>
              <div class="fht-cell"></div></th>
            <th style="" data-field="name" tabindex="0"><div class="th-inner ">Item Name</div>
              <div class="fht-cell"></div></th>
            <th style="" data-field="price" tabindex="0"><div class="th-inner ">Item Price</div>
              <div class="fht-cell"></div></th>
          </tr>
        </thead>
        <tbody>
          <tr data-index="0">
            <td><a class="detail-icon" href="javascript:"><i class="glyphicon glyphicon-plus icon-plus" id="1"></i></a></td>
            <td style="">0</td>
            <td style="">Item 0</td>
            <td style="">$0</td>
          </tr>
            <tr id="detail-view1" style="background-color:yellow;display: none;">
            <td colspan="4">My Hidden Row</td>
          </tr>
     </tbody>
</table>

JavaScript

$('.glyphicon.glyphicon-plus').on('click', function (e) {
        e.preventDefault();
		$(this).removeClass('glyphicon-plus icon-plus');
		$(this).addClass('glyphicon-minus icon-minus');
        $('#detail-view'+this.id).toggle('slow');
    });
	$('.glyphicon.glyphicon-minus').on('click', function (e) {
        e.preventDefault();
		$(this).removeClass('glyphicon-minus icon-minus');
		$(this).addClass('glyphicon-plus icon-plus');
        $('#detail-view'+this.id).toggle('slow');
    });