Replace span tag with input to edit value & then value appear in span tag

span-input.html

<div class="span-input">
  <span class="span-el">1234 ms</span>
  <input type="text" class="hide">
</div>

<div class="span-input">
  <span data-append=" ms" class="span-el">1234 ms</span>
  <input type="text" class="hide">
</div>

<img src="https://via.placeholder.com/150x108" alt="">

span-input.js

$(function () {
    var containerEl = $(".span-input");
    var spanEl = containerEl.find("span.span-el");
    var inputEl = containerEl.find("input");

    spanEl.click(function (e) {
        var el = $(this);
        var val = el.text().split(" ")[0];
        if (val) {
            var currInput = el.siblings("input");
            currInput.val(val);
            el.addClass("hide");
            currInput.removeClass("hide");
            setTimeout(function () {
                $("body").click(function (e) {
                    if ($(e.target).is(inputEl)) {
                        e.stopImmediatePropagation()
                        return false;
                    }
                    var dataAppend = el.data("append") ? el.data("append") : "";
                    el.text(currInput.val() + dataAppend);
                    currInput.addClass("hide");
                    el.removeClass("hide");
                    $("body").unbind("click");
                })
            }, 500)
        }
    })
})