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('my1','click',function(){
               bye(this)
            })
            
            function hello(me) {
               var str = $(me).text();
               $(me).append("<input id=\"my1\" type=\"text\" style=\"width: 198px; height: 100%;\" value=\"" + str + "\" /><input id=\"my1confirm\" type=\"button\" style=\"width: 35px;\" value=\"" + "OK" + "\" />");

            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);

            objTR.undelegate('click').bind("click", function (e) {
                e.preventDefault();
                alert("it shouldn't  execute this in this click, but it does... ");
            });

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