JSFiddle - React, Tailwind, and code Playground
HTML
<div class="card shadow rounded">
<div class="card-content one-third">
<div class="list-title">Owner Details</div>
<ul class="detail-list">
<li class="button rounded"><a class="list-heading">Mr:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mrs:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Email:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mobile No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Phone No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Address:</a> <a class="list-result-edit" contenteditable="true"></a></li>
</ul>
</div>
<div class="card-content one-third">
<div class="list-title">Owner Details</div>
<ul class="detail-list">
<li class="button rounded"><a class="list-heading">Mr:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mrs:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Email:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Mobile No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Phone No:</a> <a class="list-result-edit" contenteditable="true"></a></li>
<li class="button rounded"><a class="list-heading">Address:</a> <a class="list-result-edit" contenteditable="true"></a></li>
</ul>
</div>
</div>
CSS
.rounded { border-radius: 3px; }
.shadow { box-shadow: 0 2px 2px #c1c1c1; }
.card { max-width:1600px; min-width:1000px; background-color: white; padding: 15px 15px 30px 15px; min-height: 100px; margin:0 auto 30px auto; overflow:hidden; }
.one-third { width: 33.3%; float: left; }
.list-title { font-size: 12pt; font-weight: 300; font-style: italic; margin: 20px auto -10px auto; width:95%; border-bottom: 1px solid #ededed; padding: 0 0 6px 0; color: #00838f;}
.list-title a { color: #999999; font-size: 9pt; float: right; line-height: 24px}
.list-heading { width: 110px; text-align: right; display: inline-block; font-weight: 500; color: #747474; margin-right: 5px; float: left; }
.list-result-edit { display: table-cell; }
.button:hover { cursor: pointer; background-color: #f7f7f7; border-radius: 3px }
.detail-list { list-style: none; margin: 0; padding: 20px 20px 0 20px; display: block; font-size: 10pt; }
.detail-list li { width: 100%; padding: 2px; color: #999999; font-style: italic; }
.edit { background-color: #d0f8ce; cursor: pointer; }
[contenteditable="true"]:active { border:none; outline:none; }
[contenteditable="true"]:focus { border:none; outline:none; }
JavaScript
$(".list-result-edit").keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(e.target).parent().is(":last-child")) {
$(e.target).parents(".card-content").next().find(".list-result-edit:first").focus();
}
else {
$(e.target).parent().next().children().focus();
}
}
});
/*-- Adds and removes class to change background colour on edit of DIV --*/
$(".list-result-edit").focusout(function() {
$(".detail-list li.edit").removeClass('edit');
$(".detail-list li").addClass('button');
});
/*-- Adds and removes class to make above DIV consistant once active --*/
$( ".list-result-edit" ).focus(function() {
$(".detail-list li").addClass('button');
$(this).closest(".detail-list li").removeClass("button");
$(".detail-list li.edit").removeClass('edit');
$(this).closest(".detail-list li").addClass('edit');
});