JSFiddle - React, Tailwind, and code Playground

HTML

<div class="info_lid">
						<div class="heading-gray title">Информация о лиде:</div>
							<div class="line"><div class="label">Покупатель:</div><div id="name" class="info-team editable">имя</div></div>
							<div class="line"><div class="label">Емайл:</div><div id="email" class="info-team editable">email</div></div>
							<div class="line"><div class="label">Телефон:</div><div id="tel" class="info-team editable">телефон</div></div>
							<div class="line"><div class="label">Статус:</div><div id="status-lid" class="info-team editable-select">статус</div></div>
							<div class="line note"><div class="label">Заметка:</div><div id="note" class="info-team editable-area note">заметка</div></div>
					</div>

CSS

.info_lid {
		float: left;
		width:55%;
		height:auto;
		margin-top:20px;
		margin-left:5px;
		margin-bottom:40px;
		display: block;
		padding:5px;
		border: 1px solid #E4E4E4 ;
			/** BORDER RADIUS HACKS **/
			border-radius: 5px;
			-moz-border-radius: 5px;
			-khtml-border-radius: 5px;
			-webkit-border-radius: 5px;
		}
		.info_lid .title {padding-bottom: 7px;border-bottom: 1px dotted #d4d3db; /*color:#ccc; font-size:18px; font-family:"Ubuntu Condensed", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;*/ margin-top: 7px; margin-bottom: 0px;}
		.info_lid .title span {display: block;font-size:13px;color:#999;}
		
			.info_lid  .line {
				display: block;
				width:98%;
				height: 30px;
				text-align:left;
				font-size:12px;
				padding:10px 5px 0px 5px;
				color:#333;
				font-family: Tahoma, Arial, Helvetica;
			}
			.info_lid  .line.note {background-color:#FFF8DC !important;height: 55px;}
			.info_lid  .line .label {float: left;width:25%;font-weight:bolder; color:#999;background:none;text-shadow: none;font-size:12px;}
			.info_lid  .line .info-team {float: right;width:71%;}
			.info_lid  .line .info-team .ajax {color:#228B22;}
			.info_lid  .line .info-team input {width:240px;margin-top:-5px;background-color:#fff;border-radius: 2px; -moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;}
			.info_lid  .line .info-team.note{font-style:italic;}
			.info_lid  .line .info-team textarea {width:240px;height: 40px; margin-top:-5px;background-color:#fff;border-radius: 2px; -moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;}
			.info_lid  .line:nth-child(1n) { background: #fff; /* Цвет фона */ }
			.info_lid  .line:nth-child(2n) { background: #f5f5f5; /* Цвет фона */ }

JavaScript

$(document).ready(function(){
    var rapture = function (which) {
        $(which).contents().filter(function() {
            return this.nodeType === 3;
        })
        .wrap('')
        .end()
        .filter('br') // убираем элементы переноса строки <br>
        .remove()
        .end()
        .end()
        .children().filter(function() {
            $(this).html($.trim($(this).html().replace(/(\t|\n)/g,"")));
            
            return !$(this).text().length
        }).remove();
    }
    
    $('.editable, .editable-area, .editable-select')
    .hover(function() {
        $(this).toggleClass('over-inline');
    })
    .click(function(event) {// событие КЛИК по элементу
        var $editable = $(this);
        if($editable.hasClass('active-inline')) {
            return;
        }
        var contents = $.trim($editable.html().replace(/\/p>/g,"/p>\n\n"));
        $editable
        .addClass('active-inline')
        .empty();
        
        // опребеляем какой элемент формы мы должы подставить
        var editElement = $editable.hasClass('editable') ? 
            '<input type="text" />' : '<textarea></textarea>' : '<select></select>';
        
        // заменяем таргет элементом формы
        $(editElement)
        .val(contents)
        .appendTo($editable)
        .focus()
        .blur(function(event) {
            $editable.trigger('blur');
        });
    })		
    .blur(function(event) {// ставим вместо редактируемого элемента "сохраняем.."
        var $editable = $(this);
        
        var edited = $editable.find(':first-child').val();
        $editable.children().replaceWith('<em class="ajax">сохранение ... </em>');
        
        // сохраняем посредством post 
        
        $.post('update_order.php', {
            id: $editable.attr('id'),
            id_order: <? echo $_GET['edit'] ?>,
            value: edited
        },
               // выводим новые сохраненные данные
               function(response) {
                  ...