JSFiddle - React, Tailwind, and code Playground

by Joe Pool

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div>
        <div class="popup_hider" style="display: none;"></div>
        <div class="popup_box" style="display: none;">
            <table>
                <tbody><tr>
                    <td>Member:<br><input type="text" id="tdMember"></td>
                    <td>Name<br><input type="text" id="tdName"></td>
                </tr>
                <tr>
                    <td>Phone:<br><input type="tel" id="tdPhone"></td>
                    <td>Email:<br><input type="email" id="tdEmail"></td>
                </tr>
                <tr>
                    <td><a id="tdSave" class="fake-link">Save</a></td>
                    <td><a id="tdCancel" class="fake-link">Cancel</a></td>
                </tr>
            </tbody></table>
        </div>
        
                <table border="1">
                    <tbody><tr>
                        <th><a id="listView1_lnkMemberNumber" href="javascript:__doPostBack('listView1$lnkMemberNumber','')">Member</a></th>
                        <th><a id="listView1_lnkMemberName" href="javascript:__doPostBack('listView1$lnkMemberName','')">Name</a></th>
                        <th><a id="listView1_lnkMemberPhone" href="javascript:__doPostBack('listView1$lnkMemberPhone','')">Phone</a></th>
                        <th><a id="listView1_lnkMemberEmail" href="javascript:__doPostBack('listView1$lnkMemberEmail','')">Email</a></th>
                    </tr>
                    
                <tr id="listRow_0" class="listRow">
                    <td><a class="fake-link"><span id="listView1_lblMemberNumber_0" class="showpopup">ABC123</span></a></td>
                    <td><span id="listView1_lblMemberName_0">John Doe</span></td>
                    <td><span id="listView1_lblMemberPhone_0">5551234</span></td>
                    <td><span id="listView1_lblMemberEmail_0">jdoe@email.com</span></td>
                </tr>
            
                <tr id="listRow_1"...

CSS

a.fake-link {
            text-decoration: underline;
            cursor: pointer;
        }
        div.popup_box {
            background-color: #888888;
            display: table;
            filter: alpha(opacity=100);
            border: 1px solid #999999;
            margin: auto; 
            opacity: 1;
            position: fixed;
            z-index: 11;
            -moz-opacity: 1;
        }
        div.popup_hider {
            background-color: #004392;
            filter: alpha(opacity=55);
            height: 100%;
            left: 0px;
            opacity: .55;
            position: fixed;
            top: 0px;
            width: 100%;
            z-index: 10;
            -moz-opacity:.55;
        }

JavaScript

//set the rowNumber as global variable
        var rowNumber;
        $(document).ready(function () {
            $('div.popup_hider').hide();
            $('div.popup_box').hide();
            $('[id^=listRow_]').click(function () {
                //loop al span elements in the td and fill the textboxes
                $(this).find('td span').each(function (index, value) {
                    if (index == 0) {
                        $("#tdMember").val($(value).text());
                    } else if (index == 1) {
                        $("#tdName").val($(value).text());
                    } else if (index == 2) {
                        $("#tdPhone").val($(value).text());
                    } else if (index == 3) {
                        $("#tdEmail").val($(value).text());
                    }
                });
                // get row number to hardcode the elements
                rowNumber = this.id.split("_")[1];
            });
            //on click hide the message and the
            //on click show the hider div and the message
            $('.showpopup').click(function () {
                $('div.popup_hider').fadeIn("slow");
                $('div.popup_box').fadeIn("slow");
            });
            $('#tdCancel').click(function () {
                $('div.popup_hider').fadeOut("slow");
                $('div.popup_box').fadeOut("slow");
            });
            $('#tdSave').click(function () {
                $('div.popup_hider').fadeOut("slow");
                $('div.popup_box').fadeOut("slow");
                //and now we do the reverse, find the row ID with listRow_ + rowNumber and update the values in the cell
                $('#listRow_' + rowNumber).find('td span').each(function (index, value) {
                    if (index == 0) {
                        $(value).text($("#tdMember").val());
                    } else if (index == 1) {
                        $(value).text($("#tdName").val());
                    } else if...