JSFiddle - React, Tailwind, and code Playground

by sibin va

HTML

<div class="haul" data-symbol="PIG" data-title="HAULOTTE"></div>
<div class="ashtead" data-symbol="AHT" data-title="ASHTEAD"></div>
<div class="united" data-symbol="URI" data-title="UNITED RENTALS"></div>
<div class="terex" data-symbol="TEX" data-title="TEREX"></div>
<div class="cat" data-symbol="CAT" data-title="CATERPILLER"></div>
<div class="hees" data-symbol="HEES" data-title="H&E EQUIPMENT"></div>
<div class="pal" data-symbol="PAL" data-title="PALFINGER "></div>
<br>
    <br>
        <b>Replicate above code but in table format. cant get live data to appear</b>
        <br>
            <br>
        
                <div id="live"></div>

CSS

.box {width:800px; margin:auto; clear:both; font-size:10px;    }
.floatleft2 {float: left; min-width: 120px; margin:5px;}
.stockSymbolnew {float: left; width: 40px; margin:5px; }

.stockWrapper {
    display: block;
    padding-top: 5px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
   border-bottom: 1px solid #E5DDD2;
}


.stockSymbol {
    font-weight: 600;
}

.stockPrice {
    font-weight: 600;
    color: red;
}

.stockChange {
    font-weight: 600;
    color: green;
}

.stockTime {
    font-weight: 600;
    color: grey;  
font-size: smaller; 
}

h2 {
    font-size: 1.5em;
}

p {
    margin-bottom: 0.5em;
}
.symbol { 
    float: left;
    margin-right: 3px;
}
.symbol .name { display: block }
    
.symbol.up { background: #70DB70 }
.symbol.up .change { color: green }
    
.symbol.down { background: #f7cdc2 }
.symbol.down .change { color: red }

JavaScript

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES", "NASDAQ:MNTX", "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            console.log(response[0]);
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');
            var divtitle = divContainer.data('title');
                    
 var html = '<div class="box">'+
'<div class="floatleft2 ">' + divContainer.data('title') +'</div>'+
'<div class="floatleft2 ">' +  stockInfo1.t +'</div>'+
'<div class="floatleft2 ">' +  stockInfo1.l +'</div>'+
'<div class="floatleft2 ">' +  stockInfo1.c +'</div>'+
'</div>';
            if(divtitle!=null){ 
                $("#live").append(html);
            }  
            

        });
    }
});