JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<div id="buttonDiv">
<input type="submit" value="Search" id="searchBtn"/> 
</div>

<div id="searchResults" style="background : WHITE">
    test
</div>

CSS

#profileBox {
 background : GRAY;
    width : 200px;
    height : 200px;
}

.profileBoxDiv {
    float : left;
    border : 1px solid;
    display : none;
}

#searchBoxInfo {
    float : left;
    color : #FFFFFF;
}

JavaScript

var data = [{"empID":100,"firstName":"John","lastName":"Oliver","address":"123 Hollywood Blvd, LA","phone":"4572312222", "image" : "http://dev.uchs.org/find-doctor/images/dr-omara_profile-pic.png"},{"empID":101,"firstName":"Barack","lastName":"Obama","address":"001 White House, DC","phone":"1010100101", "image" : "http://dev.uchs.org/find-doctor/images/dr-rubin_profile-pic.png"},{"empID":102,"firstName":"Tom","lastName":"Cruise","address":"333 Sunset Blvd, LA","phone":"8272828222", "image" : "http://dev.uchs.org/find-doctor/images/dr-antoniades_profile-pic.png"},{"empID":103,"firstName":"Ed","lastName":"Sheeran","address":"6377 Kings Drive, London","phone":"9298292222","image" : "http://dev.uchs.org/find-doctor/images/dr-king_profile-pic.png"}];

function renderSearchResultBoxes(){
 $("#searchResults").html("");
 for (var i = 0; i < data.length; i++) {      
     var profileBox = $("<div id='profileBoxDiv" + i + "'>").attr({'class':'profileBoxDiv'});
     
var img = $('<img />', { 
  id: 'Myid',
  src: data[i].image,
  height : 100,
  width : 100,
  alt: 'MyAlt'
});
var info = $('<div />').attr({'class':'searchBoxInfo'});
info.html("<span> " + data[i].firstName + " " + data[i].lastName+ "</span>");

img.appendTo(profileBox);
info.appendTo(profileBox);
     
   profileBox.appendTo($("#searchResults"));
     
    $(".profileBoxDiv").fadeIn(1000, function() {});
     
/*        $(".profileBoxDiv").animate({
            left: '250px',
            height: '+=150px',
            width: '+=150px',
        }, 1000); */

     

  }
}

$("#searchBtn").click(function(){
    renderSearchResultBoxes();
});