JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gist.github.com/raw/2944926/d87c96c1529d7f5e8c8c4015c7b9100a5f6a8db8/changepolling.joelpurra.js"></script>
<input id="editable" value="Input backed editable div (double click to edit)"/>

<button>Click to simulate external value change with random text</button>

<h1>jQuery plugin to simulate an editable div</h1>
    <p>
    See StackOverflow question <a href="http://stackoverflow.com/questions/11052919/handle-input-text-change-event">Handle input text change event</a>.
</p>


<h1>Logging value of hidden editable element</h1>
<ol id="log"></ol>

CSS

h1{
    font-weight: bold;
    margin-top: 0.5em;
}

JavaScript

(function($) {
    $.fn.editable = function() {
        return this.each(function() {
            var $this = $(this).hide();
            var div = $('<div>' + $this.val() + '</div>').show().insertAfter($this).data('input', $this);

            $this.data('div', div);

            div.dblclick(function() {
                $(this).hide();
                $(this).data('input').show();
            });
            $this.blur(function() {
                $(this).hide();
                $(this).data('div').html($(this).val()).show();
            });

            $this.change(function() {
                $(this).data('div').html($(this).val());
            });

            // Check for changes by polling every n milliseconds
            // changepolling.joelpurra.js
            // https://gist.github.com/2944926
            $this.changePolling({
                interval: 250
            });
        });
    };

})(jQuery);


$(function() {
    // Initialize editable
    $('#editable').editable();
});


$(function() {
    // This is simulating a separate plugin that sets the input value
    $('button').click(function() {
        // Setting .val() without calling .change()
        var rnd = Math.floor(Math.random() * 10000);
        alert(rnd);
        $("#editable").val('New random value is ' + rnd);
    });
});


$(function() {
    // Logging for debugging purposes
    var $hiddenEditable = $("#editable");

    function logElementValue() {
        logElement($hiddenEditable, $hiddenEditable.val())
    }

    function logElement($element, data) {
        var id = $element.attr('id');

        // Log to console
        try {
            console.log(id, data, $element.length, $element);
        } catch (e) {}

        // Log to page for fast feedback
        var $log = $('#log');

        $('<li />', {
            html: ("#" + id + ": " + data)
        }).prependTo($log);

        // Trim log list
        $log.children('li:gt(99)').remove();
    }

    var interval = 500;
 ...