JSFiddle - React, Tailwind, and code Playground

by snowMonkey

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Jayashree</span></a></td>
                <td><span class="lsusrlname">Gopalan</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usract"><span class="usrin glyphicon glyphicon-ok" title="Activate"> </span></a>
                </td>

            </tr>
            <tr>
                <td><a href="#" data-toggle="modal" data-target="#usrdetails"><span class="lsusrfname">Siva</span></a></td>
                <td><span class="lsusrlname">Prasad</span></td>
                <td align=center>
                    <a href="#" data-toggle="modal" data-target="#usrdeact"><span class="usrrm glyphicon glyphicon-remove" title="De-Activate"> </span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<div class="modal fade" id="usract" role="dialog">
    <div class="modal-dialog uc-modal">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Activate user</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-horizontal disableform">
      ...

CSS

.usrin{color: #ccc;}
.usrrm{color: #d9534f;}
.usrin:hover, .usrin:focus, .usrin:active, .usrin:visited{color: #66b90e;}
.usrrm:hover, .usrrm:focus, .usrrm:active, .usrrm:visited{color: #c9302c;}
.table > thead{
    background-color:#337ab7;
    color: #eee;
}

JavaScript

$(".usrrm, .usrin").click(function() {
  // Mark the element that triggered the modals. we'll need this later.
  $(this).parent().addClass("currently-active-el");
  
  // Populate the modal fields.
  var tdusrname = $(this).parents("tr").children("td:first").text();
  $(".fname").val(tdusrname);

  var tdlname = $(this).parents("tr").children("td:nth-child(2)").text();
  $(".lname").val(tdlname);
});

/*****
 * #actusr.click() - we are activating this user. At this point,
 *    we need to go back to that element that triggered the modal,
 *    and remove its flagging class. We have a few other things we
 *    need to do: first, redirect the modal target from the active
 *    modal to the deactive modal, and change the icons for the span.
 *
 *****/
$("#actusr").click(function() {
  $(".currently-active-el")
    .attr("data-target", "#usrdeact")           // redirect the target modal,
    .removeClass("currently-active-el").        // remove the placeholder
  find("span")
    .removeClass('usrm glyphicon glyphicon-ok') // toggle the glyph class
    .addClass('usrin glyphicon glyphicon-remove')
    .prop("title", "Deactivate")                // change the tooltip text

});

/*****
 * #de_actusr.click() - we are deactivating this user. At this point,
 *    we need to go back to that element that triggered the modal,
 *    and remove its flagging class. We have a few other things we
 *    need to do: first, redirect the modal target from the active
 *    modal to the active modal, and change the icons for the span.
 *
 *****/
$("#de_actusr").click(function(evt) {
  $(".currently-active-el")
    .attr("data-target", "#usract")             // redirect the target modal,
    .removeClass("currently-active-el").        // remove the placeholder
  find("span")
    .removeClass('usrm glyphicon glyphicon-remove')
    .addClass('usrin glyphicon glyphicon-ok')   // toggle the glyph class
    .prop("title", "Activate")                  // change the tooltip text
});

/*****
 *...