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 class="f" id="1">1</td>
        <td>
          <div class="maindiv">
            <div class="productdiv">
              <p class="select_product">Select Items</p>
            </div>
            <div class="employeediv">
              <input type="button" class="select_employee" value="Select employee">
            </div>
            <div class="pricediv">
              Price
            </div>
            <div class="actiondiv">
              <input type="button" value="x" class="remove" />
            </div>
          </div>
        </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;
}

.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;
  width: 350px;
}

td {
  font-family: 'echo_grotesque-webfont';
  font-size: 12px;
  font-weight: regular;
  color: blue;
}

.employeeimages {
  height: 97px;
  width: 73px
}

.maindiv {
  position: relative;
  height: 80px;
  width: 300px;
}

.productdiv {
  position: relative;
  left: 3px;
  height: 35px;
  width: 111px;
  text-align: center;
}

.employeediv {
  position: relative;
  left: 104px;
  height: 35px;
  width: 111px;
  top: -47px;
  text-align: center;
}

.pricediv {
  position: relative;
  left: 222px;
  height: 35px;
  width: 93px;
  top: -82px;
}

.actiondiv {
  position: relative;
  left: 7px;
  height: 40px;
  width: 193px;
  top: -82px;
}

.arrays {
  display: hidden;
}

JavaScript

$(document).ready(function() {
  var rowspans;
  var servicecount;
  var cnt;
  var ser = [];
  var refForEmployee = new Firebase("https://kekranmekrandubai.firebaseio.com/package");

  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].package_name ? data[key].package_name : '';
        service = data[key].service ? data[key].service : '';
        servicecount = service.length;

        console.log("service data");
        console.log(service);
        console.log(servicecount);
        if (name.trim().length > 0) {
          list.push({
            image: name,
            emp_name: emp_name,
            services: service
          })
        }
      }
    }
    // refresh the UI
    refreshUI(list);


  });


  function refreshUI(list) {
    var lis = '';
    for (var i = 0; i < list.length; i++) {
      var empname = list[i].emp_name;
      var serc = [];
      serc = list[i].services;
      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><p class="arrays">' + serc + '</p></div></div>';

    };

    document.querySelector('#employee_list').innerHTML = lis;
  };
  $('body').on('click', '.employeeimages', function() {
    var name = $(this).closest('.customize').find('.firstname').text();
    var service = [];
    service = $(this).closest('.customize').find('.arrays').text();
    console.log(service);

    //var myString = "Mr. Jack Adams";
    // Create a variable to contain the array
    var mySplitResult;
    // Use the string.split function to split the string
    mySplitResult = service.split(",");
    for (i = 0; i <...