JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <td>
            <span id="Protocol" onclick="addChanger(this);">https</span>
        </td>
    </tr> 
</table>

JavaScript

function addChanger(me) {
    var str = $(me).html();
    
    $(me)
        .empty()
        .append($("<input>")
                     .attr("id", "my1")
                     .attr("type", "text")
                     .css({
                          "width": "198px",
                          "height": "100%"
                      })
                     .val(str))
        .append($("<input>")
                    .attr("id", "my1confirm")
                    .attr("type", "button")
                    .click(function (e) {
                        e.stopPropagation();
                        submitChanger(this);
                    })
                    .css("width", "35px")
                    .val("OK"));
    
    $(me).removeAttr("onclick").unbind("click");

    return false;
}

function submitChanger(me) {
    var str = $(me).parents("span:first").find("input:first").val();
    
    // Here you can validate and send a request to the server (or whatever)
    
    $(me).parent().html(str).click(function () {
        addChanger(this);
    });
}