test

index.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<div id="contacts">
  <span class="search bar ui-widget">
    <input type="text" id="search-field" placeholder="Filter" />
    <span class="ui-icon ui-icon-search"></span>
  </span>
  <ul id="sortable" class="list">
    <li data-id="1">
      <img src="https://lorempixel.com/100/100/nature/1/" class="img">
      <h3 class="title">The Grasslands</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      <span class="buttons">
      <button class="edit-item-btn">Edit</button>
      <button class="remove-item-btn">Remove</button>
      </span>
    </li>
    <li data-id="2">
      <img src="https://lorempixel.com/100/100/nature/2/" class="img">
      <h3 class="title">Paradise Found</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <span class="buttons">
      <button class="edit-item-btn">Edit</button>
      <button class="remove-item-btn">Remove</button>
      </span>
    </li>
    <li data-id="3">
      <img src="https://lorempixel.com/100/100/nature/3/" class="img">
      <h3 class="title">Smoke On The Water</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <span class="buttons">
      <button class="edit-item-btn">Edit</button>
      <button class="remove-item-btn">Remove</button>
      </span>
    </li>
    <li data-id="4">
      <img src="https://lorempixel.com/100/100/nature/4/" class="img">
      <h3 class="title">Headline</h3>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <span class="buttons">
      <button class="edit-item-btn">Edit</button>
      <button class="remove-item-btn">Remove</button>
      </span>
    </li>
  </ul>
  <table>
    <td class="img">
      <input type="hidden" id="id-field" />
      <input type="text" id="img-field" placeholder="Image URL Path" />
    </td>
    <td class="">
      <input type="text" id="title-field" placeholder="Title" />
    </td>
    <td class="description">
      <input type="text" id="description-field" placeholder="Description" />
    </td>
    <td class="add">
      <button id="add-btn">Add</button>
      <button id="edit-btn">Edit</button>
    </td>
  </table>
</div>

script.js

/* listjs */
var options = {
  valueNames: [{
    data: ['id']
  }, {
    attr: 'src',
    name: 'img'
  }, 'title', 'description']
};

// Init list
var contactList = new List('contacts', options);

var idField = $('#id-field'),
  titleField = $("#title-field"),
  descriptionField = $('#description-field'),
  imgField = $('#img-field'),
  addBtn = $('#add-btn'),
  editBtn = $('#edit-btn').hide(),
  removeBtns = $('.remove-item-btn'),
  editBtns = $('.edit-item-btn'),
  sortList = $("#sortable"),
  editTable = $(".editTable");

addBtn.click(function() {
  contactList.add({
    id: Math.floor(Math.random() * 110000),
    title: titleField.val(),
    description: descriptionField.val(),
    img: imgField.val()
  });
  clearFields();
  sortList.sortable("refresh");
  refreshCallbacks();
});

editBtn.click(function() {
  var item = contactList.get('id', idField.val())[0];
  item.values({
    id: idField.val(),
    title: titleField.val(),
    description: descriptionField.val(),
    img: imgField.val(),
  });
  clearFields();
  editBtn.hide();
  moveTable();
});

function refreshCallbacks() {
  // Needed to add new buttons to jQuery-extended object
  removeBtns = $(".remove-item-btn");
  editBtns = $(".edit-item-btn");
  // Refreshes UI for new buttons
  removeBtns.each(function(ind, el) {
    $(el).button({
      icon: "ui-icon-close",
      showLabel: false
    });
  });
  editBtns.each(function(ind, el) {
    $(el).button({
      icon: "ui-icon-comment",
      showLabel: false
    });
  });
  $(".buttons").controlgroup();

  removeBtns.click(function(e) {
    // Remove Item Button
    var itemId = $(this).closest("li").data("id");
    console.log("Removing Item " + itemId);
    contactList.remove('id', itemId);
  });

  editBtns.click(function(e) {
    // Edit Item Button
    var itemId = $(this).closest("li").data("id");
    var itemEl = $(this).closest("li");
    console.log("Editing Item " + itemId);
    var itemValues = contactList.get('id', itemId)[0].values();
    idField.val(itemValues.id);
    titleField.val(itemValues.title);
    descriptionField.val(itemValues.description);
    imgField.val(itemValues.img);

    editBtn.show();
    addBtn.hide();

    moveTable(itemEl);
  });
}

function clearFields() {
  titleField.val("");
  descriptionField.val("");
  imgField.val("");
}

function moveTable(el) {
  var offset = 25,
    pos = $(el).is("li") ? $(el).position() : false,
    target;
  if (pos) {
    // Table is in Home position and ready to move to a new position
    target = pos.top + $(el).height() + offset;
    console.log("Storing Original Edit Table Position: ", editTable.position());
    editTable.data("original-position", editTable.position());
    console.log("Moving Edit Table to " + target + "px");
    editTable.css({
      position: "absolute",
      "box-shadow": "2px 4px 5px #444"
    }).animate({
      top: target + "px"
    });
    editTable.data("home", false);
  } else {
    if (editTable.data("home") === false) {
      // Move Edit Table Home
      target = editTable.data("original-position").top;
      console.log("Moving Edit Table to " + target + "px");
      editTable.css({
        position: "absolute",
        "box-shadow": "none"
      }).animate({
        top: target + "px"
      }, function() {
        editTable.css("position", "inherit");
        editTable.data("home", true);
      });
    }
  }
}

/* jQuery */
$(function() {
  $("#sortable").sortable().disableSelection();

  $('#search-field').on('keyup', function() {
    var searchString = $(this).val();
    contactList.search(searchString);
  });

  $(document).on("keydown", function(e) {
    console.log(e);
    if ((e.keyCode == $.ui.keyCode.ESCAPE) && !editTable.data("home")) {
      // Clear entries and send table back
      clearFields();
      moveTable();
    }
  });
  // Sets callbacks to the buttons in the list
  refreshCallbacks();
});
   $(document).ready(function() {
                alert( $(".title").length );
            });

 $(document).ready(function(){  
    $("#add-btn").click(function(){    
         var img = $("#img-field").val();
         var titl = $("#title-field").val();
         var desc = $("#description-field").val();

         localStorage.setItem("img-field", img);
         localStorage.setItem("title-field", titl);
         localStorage.setItem("description-field", desc); 

         $("#img-field, #title-field, #description-field").val(""); 
    }); 


    $("#img-field").val(localStorage.getItem("img-field"));
    $("#title-field").val(localStorage.getItem("title-field"));
    $("#description-field").val(localStorage.getItem("description-field"));
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://listjs.com/assets/javascripts/list.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script>

style.css

body {
  font-family: sans-serif;
}

.bar {
  display: block;
  padding: 5px;
  width: 100%;
  height: 20px;
  margin-bottom: 5px;
  position: relative;
}

.search input {
  padding: 3px;
  padding-left: 20px;
  width: 110px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 13px;
  position: absolute;
  right: 10px;
}

.search .ui-icon.ui-icon-search {
  color: #ccc;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 12px;
  right: 125px
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list li {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.list li:after {
  content: "";
  display: table;
  clear: both;
}

.list .img {
  display: inline-block;
  float: left;
  margin-right: 5px;
  width: 320px;
  height: 320px;
  
}

.list .title {
  display: inline-block;
  padding: 0;
  margin: 0;
  height: 25px;
}

.list .description {
  font-size: 0.65em;
  padding: 0;
  margin: 0;
  height: 40px;
}

.list .buttons {
  position: absolute;
  top: 5px;
  right: 5px;
}

.list li .ui-button-icon-only {
  width: 60px;
  height: 30px;
  padding: 0.4em;
}

.editTable {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #eee;
  padding: 3px;
  margin: 0 -2px;
}

test.markdown

test

A Pen by Daniel Blanco on CodePen.

License.