JSFiddle - React, Tailwind, and code Playground

by _abl

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<ul class="list-group">
  <li class="list-group-item">
    <div class='view-mode'> <span>Cras justo odio</span>
      <button type="button" class="btn btn-link"> Edit </button>
    </div>
    <div class='edit-mode' style="display:none;">
      <input type="text" class="form-control"/>
      <button type="button" class="btn btn-default btn-sm cancel-edit"> Cancel </button>
      <button type="button" class="btn btn-primary btn-sm confirm-edit"> Save </button>
    </div>
  </li>
  <li class="list-group-item">
    <div class='view-mode'> <span>Cras justo odio</span>
      <button type="button" class="btn btn-link"> Edit </button>
    </div>
    <div class='edit-mode' style="display:none;">
    <input type="text" class="form-control"/>
    <button type="button" class="btn btn-default btn-sm cancel-edit"> Cancel </button>
    <button type="button" class="btn btn-primary btn-sm confirm-edit"> Save </button>
    </div>
  </li>
  <li class="list-group-item">
    <div class='view-mode'> <span>Cras justo odio</span>
      <button type="button" class="btn btn-link"> Edit </button>
    </div>
    <div class='edit-mode' style="display:none;">
    <input type="text" class="form-control"/>
    <button type="button" class="btn btn-default btn-sm cancel-edit"> Cancel </button>
    <button type="button" class="btn btn-primary btn-sm confirm-edit"> Save </button>
    </div>
  </li>
  <li class="list-group-item">
    <div class='view-mode'> <span>Cras justo odio</span>
      <button type="button" class="btn btn-link"> Edit </button>
    </div>
    <div class='edit-mode' style="display:none;">
    <input type="text" class="form-control"/>
    <button type="button" class="btn btn-default btn-sm cancel-edit"> Cancel </button>
    <button type="button" class="btn btn-primary btn-sm confirm-edit"> Save...

CSS

.list-group-item.selected{
    background:#ccc;
}

JavaScript

$(".btn-link").click(function () {
	$(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});
$(".cancel-edit").click(function () {
	$(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});
$(".confirm-edit").click(function () {
    var inptext = $(this).siblings('input').val();
    $(this).parent('.edit-mode').siblings('.view-mode').children('span').text(inptext);
	$(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});

$("body").on('click', '.list-group-item', function() {	

	if ($(this).hasClass('selected')) {
       $(this).removeClass('selected');
     } else {
      $(".list-group-item").removeClass('selected');
       $(this).addClass('selected');
     }
	  
	
});