JSFiddle - React, Tailwind, and code Playground

HTML

<ul>

                      <li>

                       <img src="images/pen_edit.png" class="pen_edit"  alt="Edit">
                        <a href="#">
                          <img src="images/images.jpg" class="avatar"/></a>
                          <span class="contact_name">NAME</span><br />
                          <span class="contact_phone">+30000000000000</span><br />
                          <a href="#" class="contact_email">[email protected]</a>                                 
                    
                        <img src="images/Button_Ok.png" align="right" vspace="10" class="button_ok" alt="Ok">
                        <img src="images/Button_Cancel.png" align="right" vspace="10" class="button_cancel" alt="No">
                      </li>
                      
                      
                      <li>
                      <img src="images/pen_edit.png" class="pen_edit"  alt="Edit">
                        <a href="#">
                          <img src="images/images.jpg" class="avatar"/></a>
                          <span class="contact_name">NAME2</span><br />
                          <span class="contact_phone">+300000001</span><br />
                          <a href="#" class="contact_email">[email protected]</a>                                 
                    
                        <img src="images/Button_Ok.png" align="right" vspace="10" class="button_ok" alt="Ok">
                        <img src="images/Button_Cancel.png" align="right" vspace="10" class="button_cancel" alt="No">
                      </li>
                      <li>
                      
                      <img src="images/pen_edit.png" class="pen_edit"  alt="Edit">
                        <a href="#">
                          <img src="images/images.jpg" class="avatar"/></a>
                          <span class="contact_name">NAME3</span><br />
                          <span class="contact_phone">+300000098090</span><br />
              ...

CSS

ul li
{
    list-style:none;
    width:400px;
}
ul li img
{
    margin-left:20px;
}

/*-------------------*/
ul li img.pen_edit {
    float:right;
    position:relative;
    height:20px;
    width:20px;
    display:none;
    cursor:pointer;
    top:0px;
}

ul li:hover {
    border:1px solid #999;    
    cursor:text;
}
ul  li img.button_ok, ul  li img.button_cancel {
    position:static;
    height:20px;
    width:20px;
    position:relative;
    cursor:pointer;
    bottom:-13px;
    border:1px solid #999;
    display:none;
}




img.avatar {
    height:50px;
    width:50px;
    padding:1px;
    float:left;
    margin-left:15px;
    margin-right:15px;
}

JavaScript

$(document).ready(function() {
var elm_name = 'not_input';
var click_li = true;
    $('ul>li').mouseover(function(){ 
        if (click_li){
          $(this).children('img.pen_edit').css('display','block');}
          
    }).mouseleave(function(){ 
        $(this).children('img.pen_edit').css('display','none');
        
    }).click(function(){
            if(elm_name == 'input'){
              return false;
            }
            
            var contact_name = $(this).children('span.contact_name').html();
            var code_contact_name = '<input type="text" id="edit_contact_name" style="margin-bottom: 1px; padding:1px 5px;width:200px"  maxlength="30" value="'+contact_name+'" />';
            $(this).children('span.contact_name').empty().append(code_contact_name);
            
            var contact_phone = $(this).children('span.contact_phone').html();
            var code_contact_phone = '<input type="text" id="edit_contact_phone" style="margin-bottom: 1px; padding:1px 5px;width:200px" maxlength="32" value="'+contact_phone+'" />';
            $(this).children('span.contact_phone').empty().append(code_contact_phone);
            
            var contact_email = $(this).children('.contact_email').html();
            var code_contact_email = '<input type="text" id="edit_contact_email" style="margin-bottom: 1px; padding:1px 5px; width:200px" maxlength="32"  value="'+contact_email+'" />'                    
            $(this).children('.contact_email').empty().append(code_contact_email);
    
    $('img.pen_edit').css('display','none');
    $(this).children('img.button_ok').css('display','block');
    $(this).children('img.button_cancel').css('display','block');
        $(this).mouseover(function(){                     
            $(this).children('img.pen_edit').css('display','none');
        });
    click_li = false; 
    elm_name = 'input';
    return false;
    });
            /* Click button_ok*/
            $('img.button_ok').click(function(){     ...