JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div class="container">
            <table class="show-items" width="100%">
                <thead class="header">
                    <tr>
                        <th  colspan="5" style="text-align:center;">
                            <button class="search-btn">Search</button>
                            <input class="search" placeholder="Search" type="text">
                            <div class="error" style="display:none;"></div>
                        </th>
                    </tr>
                    <tr>
                        <th>ID</th>
                        <th>Address</th>
                        <th>Company</th>
                        <th>Email</th>
                        <th>Phone</th>
                    </tr>
                    
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="back-to-list"></div>

            <form class="edit-form">
                <div class="title">Edit Item:</div>
                <label for="address">Adress:</label><input id="address" name="address" />
                <label for="company">Company:</label><input id="company" name="company" />
                <label for="email">Email:</label><input id="email" name="email" />
                <label for="phone">Phone:</label><input id="phone" name="phone" />
                <label for="isActive">isActive:</label>
                    <select name="isActive" id="isActive">
                      <option value="true">True</option>
                      <option value="false">False</option>
                    </select><br />
                <label for="friends">Friends:</label>
                    <input class="small" name="friends1" />
                    <input class="small" name="friends2" />
                    <input class="small" name="friends3" />
                <button class="send">Edit</button>
            </form>

        </div>

CSS

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.show-items {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
    color:#ccc;

}
.show-items thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.show-items tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.show-items tbody tr:hover {
    background-color: #CCE7E7;
}


.edit-form {
    display: none;
    position: relative;
    margin:50px auto;
    width: 500px;
    height: auto;
    border: 1px solid #CCE7E7;
    border-radius: 5px;
    background: #DDEEEE; 
    box-shadow: 0 0 13px 3px #CCE7E7;
    padding-top:30px;
    padding-bottom:10px;
    input{
        width:250px;
        padding:5px 0;
    }
}
label{
    width:100px;
    margin-left:50px;
    padding-bottom:10px;
}
input.small{
    width:100px;
}
.title{
    position: absolute;
    width:100px;
    height:40px;
    left:200px;
    top:-20px;
    background-color:#DDEEEE;
    border: 1px solid #CCE7E7;
    box-shadow: 0 0 13px 3px #CCE7E7;
    line-height:40px;
    text-align: center;
    font-weight: bolder;
    font-style: italic;
    border-radius:5px;
    z-index: 1;
}
.send{
    display: block;
    width:100px;
    height:30px;
    margin:0 auto;
    background-color:rgba(0,0,0,0.2);
}
.send:hover{
    color:#fff;
}
.search{
    background-repeat: no-repeat;
    background-position: 5px 0px;
    text-indent: 25px;
    border:none;
    width:100px;
    transition:all .2s linear;
}
.search:focus{
    background-color:rgba(0,0,0,0.1);
    color:#aaa;
    width:150px;
}
.search-btn{
    height:15px;
    width:50px;
    background-color: #DDEEEE;
    border:1px solid #fff;
    font-size:10px;
    text-shadow:0px 0px 40px #000;
}

JavaScript

'use strict';
$(document).ready(function(){
	extractItems();
	editItems();
	$('.search-btn').on('click', function(e){
		e.stopPropagation();
		e.preventDefault();
		searchItems();
	});
	$('.search').on('keypress', function(e){
		if(e.keyCode == 13){
			searchItems();
		}
	});

	$('.error').on('click', '.remove', function(){
		$('.error').fadeOut(1000);
	});
    
    console.log('test');

});

function extractItems(){
  		$.each(data, function(index, item){
  			var address = item.address,
  				company = item.company,
  				email = item.email,
  				phone = item.phone,
  				id = item.index;

  			var output = $('<tr><td>'+id+'</td><td>'+address+'</td><td>'+company+'</td><td>'+email+'</td><td>'+phone+'</td></tr>').data('data', item);

  			$('table tbody').append(output);
  		});
}

function editItems(){
	$('table tbody').on('click', 'tr', function(){
		var user = $(this).data('data');
		$('#address').val(user.address);
		$('#company').val(user.company);
		$('#email').val(user.email);
		$('#phone').val(user.phone);
		$('#isActive option[value="'+user.isActive+'"]').attr('selected','selected');
		$.each(user.friends, function(index, friend){
			$('[name="friends'+( index + 1 )+'"]').val(friend.name);
		});
		$('.title').html('Edit item: '+user.index);
		$('.edit-form').show();
	});
}

function searchItems(){
	
	var keyword = $('.search').val(),
		searchItems = 0,
		result = '';

	if(keyword.length < 2){
		$('.error').html('Minimum 3 characters <span class="remove" style="color:red;font-size:15px;cursor:pointer;">x</span>').fadeIn('fast');
		return false;
	}else{
		$('.error').empty();
	}
	
	$('.show-items tbody').empty();
    
  		$.each(data, function(index, item){

    		if( item.name.first.indexOf(keyword) > -1 || item.name.last.indexOf(keyword) > -1 || item.address.indexOf(keyword) > -1 || item.company.indexOf(keyword) > -1 || item.phone.indexOf(keyword) > -1 || item.email.indexOf(keyword) > -1 ){
	    		var address = item.address,
	  				company =...