JSFiddle - React, Tailwind, and code Playground

by Anu Vidhya

HTML

<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>     
<div id="employee_list">
      </div>

JavaScript

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);
    employeedetails(list);
    console.log(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 +'" style="height:97px;width:73px"></img><img src="img/bookingemployeeid.png" class="employee_id_display"><p onclick="gettingemployee_detail('+list+','+i+')" 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;
};
function gettingemployee_detail(name)
{

    var TextInsideLi = document.querySelector('.firstname').innerHTML;
    console.log(list);
    console.log(name);
    var list = employeedetails();
    
    
}