Javascript example

HTML

<div id="textareas">
	<div class="textareas" id="firstTextArea">
		<table id="firstMainTable">
			<tr>
                <td class="td" id="lineNoC"><span id="1">1</span></td>
				<td><textarea onkeydown="addNO(this, event)" onkeyup="reloadRows(event)"  id="first"> </textarea></td>
			</tr>
		</table>
	</div>
</div>

CSS

body{
    font-family: monospace;
}
#textareas{
    display: flex;
    flex-direction:row;
    flex-wrap: nowrap;

}
.textareas{
    border:1px solid gray;
    height: 500px;
    width: 50%;
    margin: 5px;
    box-shadow: 0px 1px 1px black;
    overflow-y:scroll; 

}
.td {
    border-right:1px solid black;
    color:#aaaaaa;
    padding-right:3px;
    width:15px;
    position: relative;
    top:2px;
    text-align: right;
}
td{
    vertical-align:top;

}
#first{
    width:99%;
    resize:none;
    overflow-y:hidden;
}
table{
    width:100%;

}
textarea:focus, textarea{
    outline: none;
    background-color:rgb(245,245,245);
}
td span {
    display: block;
}

JavaScript

function gId(id){
		return document.getElementById(id);
	}

	
	function h(e) {
	$(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
	}
	$('textarea').each(function () {
		h(this);
	}).on('input', function () {
		h(this);
	});


	function addNO(textarea, key) {

		if(key.keyCode == 13){
			
			var currentRow = textarea.value.substr(0, textarea.selectionStart).split("\n").length+1;

			var numberOfRows = document.querySelector('textarea').value.split("\n").length+1;
			var lastId = parseInt(gId("lineNoC").lastChild.id)+1; // + 1 protoze se na 1. miste vykona funkce entru a pote teprve tato funkce			
			result = '<span id="'+lastId+'">' + lastId + '</span>';
			gId("lineNoC").innerHTML+= result;	

		}
	}
	function reloadRows(key){ // znovu vyhodnoti radkovani 
		if(key.keyCode == 8 || key.keyCode == 46){
			var numberOfRows = document.querySelector('textarea').value.split("\n").length;
			console.log("pocet radku textarey: "+numberOfRows);
			var result = "";
			gId("lineNoC").innerHTML = "";
			for (var i = 1; i <= numberOfRows; i++) {
				result+='<span id="'+i+'">' + i + '</span>';
			}
			gId("lineNoC").innerHTML += result;
		}
	}