JSFiddle - React, Tailwind, and code Playground
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>
CSS
.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];
var divContainer = $('*[data-symbol="' + stockInfo1.t +'"]');
var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
var stockName1 = stockInfo1.t;
stockString1 += '<span class="stockSymbol "> ' + stockInfo1.t + ' </span>';
stockString1 += '<span class="stockPrice "> ' + stockInfo1.l + '</span>';
stockString1 += '<span class="stockChange "> ' + stockInfo1.c + '</span>';
stockString1 += '</div>';
divContainer.append(stockString1);
});
}
});