JSFiddle - React, Tailwind, and code Playground

by cvrajeesh

HTML

<div id="container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
    <div class="column">5</div>
    <div class="column">6</div>
    <div class="column">7</div>
    <div class="column">8</div>
    <div class="column">9</div>
    <div class="column">10</div>
</div>

CSS

#container {   
}

#container .column {
     width: 200px;
     border:1px solid #ccc;
    margin-bottom: 10px;
}

#container input {
   border: none;
    margin: 0;
    padding: 0;
}

JavaScript

$(document).ready(function() {

            $("#container .column").dblclick(function() {

                var content = $(this).text();
                var width = $(this).width() - 1;
                var height = $(this).height() - 4;

                var $editbox = $("<input type='text'" +
                    "style='width:" + width + ";" +
                    "height:" + height + ";" +
                    "border:none" +
                    "' value='" + content + "' />");

                $(this).empty();
                $(this).prepend($editbox);
                $editbox.focus();
                $editbox.select();

                $($editbox).bind("blur", function() {

                    content = $(this).val();
                    var parent = $(this).parent();
                    parent.html(content);

                });

            });
});