JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="col-md-12">
    <div class="portlet light bg-inverse tripcontainer">
        <div id="container">
            <div class="col-md-4 driver">
                <div>
                    <label class="header">Driver Details</label>
                </div>
                <div>
                    <label>Name:</label>
                    <span class="dname"></span>
                </div>
                <div>
                    <label>Vehicle No:</label>
                    <span class="dvehicle"></span>
                </div>
                <div>
                    <label>Mobile No:</label>
                    <span class="dmob"></span>
                </div>
                <div>
                    <label>Email:</label>
                    <span class="demail"></span>
                </div>
                <div>
                    <label>Start Location:</label>
                    <span class="dstart"></span>
                </div>
                <div>
                    <label>Lat:</label>
                    <span class="dlat"></span>
                </div>
             ...

JavaScript

$( document ).ready(function() {
    console.log( "ready!" );

{
    var driver_data = [
        {
            "tripId": 885,
            "creationDate": "2018-09-18",
            "accDestLocation": "CASA RIO Club House, Oceania Internal Road, Nilje Gaon, Maharashtra, India",
            "accDestGeoLat": "19.1481581",
            "accDestGeoLong": "73.07762149999996",
            "accEndTime": 1537277407813,
            "accScrLocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India",
            "accSrcGeoLat": "19.1268537",
            "accSrcGeoLong": "73.00511699999993",
            "accStartTime": 1537277407813,
            "tripStatus": "COMPLETED",
            "createdBy": "SYSTEM",
            "bookedSeats": 0,
            "employeeid": "P10062044",
            "employeename": "Venkat Chepuri",
            "vehicleno": "MH09CQ7778",
            "vehiclecolor": "silver",
            "vehicletype": "OWN CAR",
            "vehiclemake": "hondacity",
            "srclocation": "RCP GATE A OFFICE, Reliance Corporate Park, MIDC Industrial Area, Ghansoli, Navi Mumbai, Maharashtra, India",
            "srclat": "19.1268537",
            "srclong": "73.00511699999993",
            "starttime": "2018-09-18T13:30:07.813Z",
            "destlocation": "CASA RIO Club House, Oceania Internal Road, Nilje Gaon, Maharashtra, India",
            "destlat": "19.1481581",
            "destlong": "73.07762149999996",
            "seatcount": 1,
            "mobilenumber": "+917977589953",
            "email": "[email protected]",
            "routeid": 0,
            "distance": 14.3,
            "passenger_data": [
                {
                    "tripId": 1015,
                    "creationDate": "2018-09-18",
                    "tripStatus": "CANCELLED",
                    "createdBy": "SYSTEM",
                    "endTime": "2018-09-18T13:21:24.882Z",
                    "employeeid":...