How to pull the value from the block to the input when clicking on the block, and after clicking on the free area of ​​the input, remove it leaving the value?

Question

JavaScript

Good afternoon. Please help/advise.
There is a task. Data grid. In the grid, when clicking on a cell, the input should be suppressed, where you can enter values ​​or which will contain the values ​​from the cell, if it was there before the click. Naturally, the value in the input can be changed, and after clicking on another cell or on a free area, the input is deleted and only the value in the block remains.

Answer 1

The solution has been found. Partially modified, partly peeped. https://jsfiddle.net/66pep87e/

Answer 2

You can not create any inputs, but use contenteditable
jsfiddle.net/seh1m0jL

Answer 3

I hope that I correctly understood the author of the click .
HTML:

<div class="cells">
    <div class="js-cells-elem" data-cellscount="1">1</div>
    <div class="js-cells-elem" data-cellscount="2">2</div>
    <div class="js-cells-elem" data-cellscount="3">3</div>
    <div class="js-cells-elem" data-cellscount="4">4</div>
    <div class="js-cells-elem" data-cellscount="5">5</div>
    <div class="js-cells-elem" data-cellscount="6">6</div>
</div>

<input type="text" class="js-hidden-input" style="display:none;"/>

CSS:

.cells div {
    margin: 1px;
    border: solid 1px gray;
    width: 40%;
    float: left;
    height: 30px;
}

JS:

var myTable = $('.cells'),
    cellsElem = myTable.find('.js-cells-elem');

cellsElem.on('click', function () {
    var $this = $(this),
        myText = $this.text(),
        myTextId = $this.data('cellscount'),
    	myInput = $('.js-hidden-input');

    myInput.
    	val(myText).
    	show().
    	attr("data-id", myTextId).
    	focus();
});

$('.js-hidden-input').on('blur', function () {
    var $this = $(this),
        myInputId = $this.attr('data-id'),
        myCells = $('.js-cells-elem').filter('[data-cellscount="' + myInputId + '"]');

    myCells.text($this.val());
    $this.hide();
});