JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script> 
<div class="tablediv">
                <div><table id="booktable">
                  <tr>
                    <td id="1">1</td>
                    <td><p class="select_product">Select Items</p></td>
                    <td><p class="select_employee">Select employee</p></td>
                    <td>Price</td>
                    <td><input type="button" value="x" class="remove"/></td>
                  </tr>
                </table></div>
                 <input type="button" value="add more" class="useradd">
              </div>

         <div class="select_employee_div" style="display:none;">
        
  <img class="employee">
      <input type="text" class="textbox" value=""/>
      <div id="employee_list">
      </div>

CSS

#employee_list {
                    position: absolute;
                    top: 136px;
                   left: 23px;
                    height: 595px;
                    width: 390px;
                    
    -moz-column-gap: 10px;
    -webkit-column-gap:80px;
    column-gap: 10px;

                    overflow: auto;
  background: black;
  opacity: 0.2;
                }
                .outlining {
    display: inline-block;
   width: 91px;
   height: 140px;
   text-align: center;
    
                    }
.customize .firstname
{
    position: relative;
top: -17px;



                        
                        color: white;
                        text-align: center;
                         padding: 0px;
                        margin: 0px;
}
.customize .lastname
{
    position: relative;
    top: -19px;
    
                       
                        
                        color: white;
                        text-align: center;
                         padding: 0px;
                        margin: 0px;

}
.customize .employeeimages
{
   position: relative;
top: 5px;


}
.customize .employee_id_display
{
    position: relative;
                        
                        top: -15px;
                        left:0px;
                        
                          height: 15px;
                        width: 73px;
                        padding: 0px;
                        margin: 0px;
                        
}
.customize .emps_id
{
    position: relative;
   
                      
                        
                        color: black;
                        text-align: center;
                        top: -56px;
                        left:0px;
                        padding: 0px;
                        margin: 0px;

}      
.tablediv {
    position: absolute;
    left: 0px;
    top: 136px;
    width: 414px;
    height: 375px;
     overflow: auto;
}
#booktable {
    position: relative;
    top: 2px;
    left: 31px;
...

JavaScript

$(document).ready(function(){
var refForEmployee = new Firebase("https://kekranmekrandubai.firebaseio.com/imageupload");

refForEmployee.on("value", function(snapshot) {
    var data = snapshot.val();
    var list = [];
    for (var key in data) {
        if (data.hasOwnProperty(key)) {
            name = data[key].image ? data[key].image : '';
           emp_name = data[key].emp_name ? data[key].emp_name : '';
            if (name.trim().length > 0) {
                list.push({
                    image: name,
                    emp_name: emp_name
                })
            }
        }
    }
    // refresh the UI
    refreshUI(list);
   
   
});


function refreshUI(list) {
    var lis = '';
    for (var i = 0; i < list.length; i++) {
      var empname = list[i].emp_name;
              lis += '<div class="outlining"><div class="customize"><img class="employeeimages" src="' + list[i].image +'"></img><img src="img/bookingemployeeid.png" class="employee_id_display"><p class="firstname">'+list[i].emp_name+'<p class="lastname">Last name</p><p class="emps_id">1001</p></div></div>';
    };
    document.querySelector('#employee_list').innerHTML = lis;
};
$('body').on('click', '.employeeimages', function () {
     var name = $(this).closest('.customize').find('.firstname').text();
     get_values(name,table_selected_index);
     console.log("inside sliding window");
     console.log(name);
     console.log(table_selected_index);
      $(".select_employee_div").css("display","none");

});
//booking main table
//add row to booking table
$(".useradd").click(function(){
var rows = $('#booktable tr').length;
    var rowcount = rows+1;

$("#booktable").append('<tr><td id='+rowcount+'>'+rowcount+'</td><td><p class="select_product">Select Item</p></td><td class="select_employee">Select employee</td><td>Price</td><td><input type="button" value="x" class="remove"/></td></tr>');
 });
//remove row and dynamically changing the index value of the removed...