inline edit

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js"></script>
<div class="container">
  <div class="row">
    <ul class="nav nav-tabs" id="employerDetailTabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="true">Settings</a>
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
            <div class="progress">
              <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-content" id="employerDetailsTabContent">
      <div class="tab-pane fade show active" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <ul class="list">
          <li>
            <h3>Site.Administrator</h3>
            <div class="list-data">
              <p class="inline-edit" title="Click to edit" data-key="1" style="width: 150px;">555</p>
              <p>&nbsp;</p>
              <p id="dateUpdated1">

                Updated: 2017-12-26
              </p>
            </div>

      ...

CSS

p.hover {
   background: #fffbe1;
   border: 1px solid #4D868E;
   width: 150px;
   padding: 8px;
 }
 
 body {
   padding-top: 140px;
   padding-bottom: 20px;
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   background-color: #F6F8FB;
   -webkit-font-smoothing: antialiased;
 }
 
 h1
 /*Main serif message on top*/
 
 {
   font-family: 'Lora', serif;
   color: #535252;
   font-weight: 700;
   font-size: 28px;
 }
 
 h2
 /*Card/page Titles*/
 
 {
   font-family: 'Lato', sans-serif;
   color: #535252;
   font-weight: 700;
   font-size: 22px;
 }
 
 h3 {
   font-family: 'Lato', sans-serif;
   color: #535252;
   font-weight: 400;
   font-size: 16px;
 }
 
 h4
 /*subtle paragraph titles*/
 
 {
   font-family: 'Lato', sans-serif;
   color: #4D868E;
   font-weight: 400;
   font-size: 16px;
 }
 
 p {
   font-family: 'Lato', sans-serif;
   color: #535252;
   font-weight: 400;
   font-size: 14px;
 }
 
 a,
 a:visited {
   color: #54C2B9
 }
 
 a:focus,
 a:hover {
   color: #4D868E
 }
 
 hr {
   width: 100%;
   height: 2px;
   background-color: rgba(173, 176, 176, 0.25);
   border: 0px;
 }
 
 .card {
   border-radius: 4px;
   background-color: #FFFFFF;
   box-shadow: 0 4px 0 0 rgba(77, 134, 142, 0.1);
   border: 0px;
   width: 100%;
   padding: 25px;
   margin-bottom: 30px;
 }
 
 .title-search {
   margin-bottom: 35px;
 }
 
 .title-search .form-group {
   margin-bottom: .25rem;
 }
 
 .title-search .input-group {
   align-items: center;
 }
 
 .title-search h2 {
   margin-right: 15px;
   margin-bottom: 0;
 }
 
 .title-search input {
   max-width: 195px;
 }
 /* Wrapping element */
 /* Set some basic padding to keep content from hitting the edges */
 
 .body-content {
   padding-left: 15px;
   padding-right: 15px;
 }
 
 .header-logo {
   background-image: url(/images/header-logo2.png);
   height: 49px;
   width: 80px;
   z-index: 20;
   background-repeat: no-repeat;
   background-size: 70px;
   margin-left: -30px;
 }
 
 footer {
   margin-top: 150px;
 }
 
 footer img {
  ...

JavaScript

function setUpdateMode(el) {
  const Update_Mode = "Update";
  el.text = Update_Mode;
  $(el).removeClass("btn-primary").addClass("btn-success");
}

function setEditMode(el) {
  const Edit_Mode = "Edit";
  $(el).text(Edit_Mode);
  $(el).removeClass("btn-success").addClass("btn-primary");

  const hiddenPrevious = $("#previousValue");
  hiddenPrevious.val("");
}

function toggleMode(el, key) {
  const inline = $(`p.inline-edit[data-key='${key}']`);
  if (inline) {
    inline.click();
    const Edit_Mode = "Edit";
    if (el.text === Edit_Mode) {
      setUpdateMode(el);
    } else {
      //ajax call to save
      // update date
      setEditMode(el);
    }
  }
}

function showError(result) {
  document.getElementById("resultStatus").value = result.status;
  document.getElementById("resultMessage").value = result.completionMessage;
  $("#results").toggle();
}

var updateConfig = function(id, value) {
  var result,
    error,
    data = {
      id: id,
      value: value
    };

  $("#progessDialog").modal();

  let update = new Promise(function(resolve, reject) {

      $.ajax({
          type: "POST",
          url: "/echo/json",
          data: {
        json: JSON.encode({
           status: "Updated",
            completetionMessage: "Setting updated successfully."
        }),
          delay: 2
        }
      })
    .done(function(resp) {
      if (resp) {
        debugger;
        if (resp.status === "Not Updated") {
          showError(resp);

          $("#progessDialog").modal("hide");
          $("#notification").notify(resp.completionMessage, {
            className: "danger",
            autoHide: true,
            position: "top right"
          });
          resolve(resp);
        } else {
          debugger;
          const dateUpdated = (new Date()).toISOString().split('T')[0];
          const dateUpdatedEl = $(`p#dateUpdated${id}`);
          dateUpdatedEl.text(`Updated:  ${dateUpdated}`);

          $("#progessDialog").modal("hide");
         ...