JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div class="form-group">
  <label class="col-sm-2 control-label" for="siteName">Website A</label>
  <div class="col-sm-3">
    <div class="input-group">
      <input class="form-control updateField" data-url="http://website.a" data-title="Website A" name="siteNameA" placeholder="Email" type="input" value="Website A val">
      <span class="input-group-btn">
          <button class="btn btn-default edit" type="button">
            <span class="glyphicon glyphicon glyphicon-pencil">EDIT</span>
      </button>
      </span>
    </div>
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label" for="siteName">Website B</label>
  <div class="col-sm-3">
    <div class="input-group">
      <input class="form-control updateField" data-url="http://website.b" data-title="Website B" name="siteNameB" placeholder="Email" type="input" value="Website B val">
      <span class="input-group-btn">
          <button class="btn btn-default edit" type="button">
            <span class="glyphicon glyphicon glyphicon-pencil">EDIT</span>
      </button>
      </span>
    </div>
  </div>
</div>

JavaScript

$('.edit').click(function(e) {
  var container = $(this.closest('.input-group'));
  var input = container.find('.updateField');
  //the following line is needed in this fiddle to emulate your special enviroment.
  input.editable = function(){};
	var inputName = input.attr('name');
  var dataURL   = input.data('url');
  console.log(inputName);
  e.stopPropagation();
  input.editable('toggle');
  container.find('.edit').hide();
});
$(document).on('click', '.editable-cancel, .editable-submit', function() {
  $('.edit').show();
});