JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<ul>
				<br/>
				<li><i class="fa fa-phone-square"></i>&nbsp;&nbsp;<a href = "#" class = "call editable" id = "phone">Call this agent at <?php echo get_user_meta(get_the_author_meta( 'ID' ), 'LC_Phone', true); ?></a></li>
				<li><i class="fa fa-envelope-square"></i>&nbsp;&nbsp;<a href="mailto:[email protected]?Subject=Hello%20again" target="_top">[email protected]</a></li>
				<li><i class="fa fa-facebook-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
				<li><i class="fa fa-google-plus-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
				<li><i class="fa fa-twitter-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li>
				<br/>
			</ul>

CSS

ul textarea {
		position: relative;
		border-radius: 5px;
		width: 100%; 
		line-height: 1.2em; 
		margin: 0px; 
		text-indent: 0px; 
		border: 1px solid rgba(93, 173, 226, 0);
		-webkit-animation: borderin 0.5s forwards;
		animation: borderin 0.5s forwards;
		display: inline-block;
		
		padding: 0.25em;
	}

ul {
		position: relative; 
    border-top: 1px solid #dcdcdc;
		color: #000;
		font-weight: normal;
		
		list-style: none;
	}

ul a.call {
		color: #6ab4e4;
	}
a {
    color:inherit;
    text-decoration: none;
}

 ul.editable:after {
		position: absolute;
		width: 25px;
		height: 25px;
		right: -12px;
		top: -12px;
		background-color: #5DADE2;
		content: '\2714';
		border-radius: 50%;
		
		z-index: 1;
		
		color: #fff;
		text-align: center;
		line-height: 25px;
		cursor: pointer;
		
		-webkit-animation: fadeIn 0.5s forwards;
		animation: fadeIn 0.5s forwards;
	}
	
	@-webkit-keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

	@keyframes fadeIn {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
	}

JavaScript

$.fn.replaceWithPush = function(a) {
    var $a = $(a);

    this.replaceWith($a);
    return $a;
};

$(document).ready(function(){
	
	$(".editable").click(function(event){
		event.preventDefault();
		switchToTextArea($(this));
	});
	
	function switchToTextArea(element) {
		var mnxx = element.height();
		var replaced = element.replaceWithPush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>');
		$(replaced).css({"min-height": (mnxx + 20) + "px"}); $(replaced).focus(); $(replaced).parent().addClass('editable');

		$(replaced).focusout(function(){
			
			var data = {id: author };
			data[$(replaced).attr('name')] = $(replaced).val();
			
			$.ajax({
				  method: "POST",
				  url: templateDir.concat('/updatedetails.php'),
				  data: data

				})
			  
			switchBack($(this), element.clone().wrap('<div>').parent().html());

			return false;
		});
		
		$(replaced).blur(function(){
			switchBack($(this), element.clone().wrap('<div>').parent().html());
		});
	}
	
	function switchBack(element, previous) {
		var replaced = element.replaceWithPush(previous).text( $(element).val());
		
		$(replaced).click(function(event){
			event.preventDefault();
			switchToTextArea($(this));
		});
		
		$(replaced).parent().removeClass('editable');
	}
});