JSFiddle - React, Tailwind, and code Playground

by Jagrati Tomar

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<table class="table" id="preferencesTable">
  <thead>
    <th>
      <span>Fall 2016 Course Preferences</span>
      <span id="addPreference" class="glyphicon glyphicon-plus-sign pull-right"></span>
    </th>
  </thead>
  <tbody>
    <tr id="row.id1">
      <td>
        row.name1
        <span class="pull-right">
              <span class="glyphicon glyphicon-arrow-up icon_padding"></span>
        <span class="glyphicon glyphicon-arrow-down icon_padding"></span>
        <span class="glyphicon glyphicon-remove icon_padding></span>
              <span class=" glyphicon glyphicon-remove icon_padding></span>
        </span>
      </td>
    </tr>
    <tr id="row.id2">
      <td>
        row.name2
        <span class="pull-right">
              <span class="glyphicon glyphicon-arrow-up icon_padding"></span>
        <span class="glyphicon glyphicon-arrow-down icon_padding"></span>
        <span class="glyphicon glyphicon-remove icon_padding></span>
              <span class=" glyphicon glyphicon-remove icon_padding></span>
        </span>
      </td>
    </tr>
    <tr id="row.id3">
      <td>
        row.name3
        <span class="pull-right">
              <span class="glyphicon glyphicon-arrow-up icon_padding"></span>
        <span class="glyphicon glyphicon-arrow-down icon_padding"></span>
        <span class="glyphicon glyphicon-remove icon_padding></span>
              <span class=" glyphicon glyphicon-remove icon_padding></span>
        </span>
      </td>
    </tr>

  </tbody>
</table>

JavaScript

$('#preferencesTable tbody tr:first-child span.glyphicon-arrow-up').hide();