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

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ul textarea {
    position: relative;
    border-radius: 5px;
    width: 90%; 
    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');
	}
});