JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Application configuration</h1>
    <!--

    -->
    <table border="1" style="border-collapse: collapse;" >
      <thead>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="width: 235px; text-align: left;">key</th>
          <th style="width: 235px; text-align: left;">value</th>
        </tr>
      </thead>
      <tfoot>
        <tr style="background-color: Black; color:White; font-weight: bold; text-transform: capitalize;">
          <th style="text-align: left;">key</th>
          <th style="text-align: left;">value</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Environment</td>
          <td id="server">testing</td>
        </tr>

        <tr>
          <td>Protocol</td>
          <td id="Protocol" style=>https</td>
        </tr>

        <tr>
          <td>UserHashMode</td>
          <td id="UserHashMode">true</td>
        </tr>

        <tr>
          <td>Logo</td>
          <td id="Logo">LogoFileCustomerN.png</td>
        </tr>

      </tbody>
    </table>

CSS

html {margin: 0px; padding: 0px; height: 100%;}
        body {margin: 0px; padding: 0px; height: 100%;}
        input{margin: 0px; padding: 0px; }

        tr:nth-child(2n+1) {background-color: #F0F0F0;}
        tr:nth-child(2n)   {background-color: #FEFEFE;}

        td
        {
            margin: 0px; padding: 0.5cm; padding: 0px; text-align: left; 
        }

JavaScript

$(document).ready(function () {
            //$('#myDataTable').dataTable().makeEditable();                
                
            $('table').delegate('#my1confirm','click',function(){
               bye(this)
            })
            
            function hello(me) {
               console.log('its something!')
               $('#Protocol').unbind('click');
               var str = $(me).text();
            //alert(str);
               $(me).append("<input id=\"my1\" type=\"text\" style=\"width: 198px; height: 100%;\" value=\"" + str + "\" /><input id=\"my1confirm\" type=\"button\" style=\"width: 35px;\" value=\"" + "OK" + "\" />");
               //$(me).attr('onclick', '').unbind('click');

            return false;
        }


        function bye(me) {
            var objTR = $(me).parent();

            //var tb = $(me).closest('table');
            var tb = objTR.find('input');
            var str = tb.val();
            tb.remove();

            objTR.text(str);
            alert("TODO: sending change event with { id : \"" + objTR.attr('id') + "\", str : \"" + str + "\" } to server");


            /*
            objTR.click(function () {
                alert("hi");
                return false;
            });
            */


            objTR.undelegate('click')

                
            $('#Protocol').css('display','block').bind('click',function(){
                hello(this)
            })
    
                
            return false;
        }
    
        $('#Protocol').css('display','block').bind('click',function(){
            hello(this)
        })
        
                
        });