JSFiddle - React, Tailwind, and code Playground

by MyNameIsCode

HTML

<html>
<head>
	<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		
		(function ($) {
			$.fn.inlineeditor = function (callback) {

				var $txt = $('<input type="text" class="inline-editor-text"/>');

				return this.each(function () {
					var $this = $(this);

					$this.on('click', function () {
						var _txt = $txt.clone().val($this.text()).insertAfter(this);

						$this.hide();
						_txt.select()
							.on('keydown', function (e) {
								if (e.which == '13') {
									$this.text(_txt.val()).show();
									_txt.remove();
									if (callback) {
										callback($this.text());
									}
								} else if (e.which == '27') {
									$this.show();
									_txt.remove();
									if (callback) {
										callback(null);
									}
								}
							}).on('blur', function (e) {
								$this.show();
								_txt.remove();
								if (callback) {
									callback(null);
								}
							});
					});
				});

			};
		})(jQuery);
		
		$(function(){
		
			var $inlineeditable = $('.inline_editable');
			
				$inlineeditable.inlineeditor(function (data) {
					var $this = $(this), id = $this.data('id');
					if (data != null) {
						alert(data);
						alert(id);
					}
				});
		
		});
	</script>
</head>
<body>
<div class="details-content">
	<p class="biography user_fillable inline_editable" data-id="Biography">Click me</p>
</div>
</body>
</html>