JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget">
    <h1>Brokers</h1>
    <ul id="brokers">
        <li class="fidelity">
            <span class="broker-age-name">Fidelity<span class="subtotal" id="fidelity-subtotal"></span></span>
            <span id="fidelity"></span> 
        </li>
        <li class="etrade">
            <span class="broker-age-name">ETrade<span class="subtotal" id="etrade-subtotal"></span></span>
            <span id="etrade"></span> 
        </li>
        <li class="scottrade">
            <span class="broker-age-name">Scottrade<span class="subtotal" id="scottrade-subtotal"></span></span>
            <span id="scottrade"></span>
        </li>
    </ul>
    <div class="total-balance">
        Account Total: <span id="total"></span>
    </div>
    
    <div class="clearfix"></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700);

body{
    background-color:#F2F2F2;
    font-family: 'Open Sans', sans-serif;
}
.widget{
    width:300px;
    background-color:#fff;
    padding:20px;
    margin:0 auto;
    word-wrap:break-word;
}
.widget h1{
    margin-top:0;
    font-size:32px;
    color:#39CCCC;
    font-weight:300;
}
ul#brokers{
    padding:0 0 10px 0;
    list-style:none;
    border-bottom:1px dotted #F0F0F0;
}
ul#brokers li{
    border:1px solid #F0F0F0;
    display:block;
    padding:10px;
    margin-bottom:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
}
ul#brokers li:nth-child(2n+2) { /*Remove margin si width can be equal*/
    margin-right:0;
}
ul#brokers li span.broker-age-name{
    color:#39CCCC;
    font-size:18px;
    margin-bottom:5px;
    display:block;
    font-weight:400;
}
ul#brokers li span.subtotal{
    float:right;
    color:#39CCCC;
}
/*change currency symbol here*/
ul#brokers li span.subtotal:before,
.widget .total-balance #total:before,
ul#brokers li span.account-balance:before{
    content:'$';
}
ul#brokers li span{
    color:#3D3D3D;
    font-weight:300;
    display:block;
}



ul#brokers li span.currency{
    float:left;
}
ul#brokers li span.account{
    display:block;
}
ul#brokers li span.account-id,
ul#brokers li span.account-balance{
    display:inline-block;
}
ul#brokers li span.account-balance{
    float:right;
}
.widget .total-balance{
    float:right;
    font-size:18px;
    color:#3D9970;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

JavaScript

var json = '{"brokers":[{"BrokerAgeName": "Fidelity","Account": "XXXX1423","Balance": 12000.50},{"BrokerAgeName": "Fidelity","Account": "XXXX5678","Balance":2350.42},{"BrokerAgeName":"ETrade","Account": "XXXX1111","Balance": 11350.11},{"BrokerAgeName":"Scottrade","Account":"XXXX2222","Balance": 230012.23},{"BrokerAgeName": "ETrade","Account": "XXXX2899","Balance": 1212.23}]}';

var obj = JSON.parse(json);

// obj key(BrokerAgeName) value(BrokarAge)
function BrokerAgeNames(obj, key, val) {
    var objects = [];
    for (var i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            objects = objects.concat(BrokerAgeNames(obj[i], key, val));
        } else if (i == key && obj[key] == val) {
            objects.push(obj);
        }
    }
    return objects;
}

/*function getAccounts(accounts){
    var accountsDetails = [];
    for (var i = 0; i < accounts.length; i++) {
        accountsDetails = accountsDetails.concat(BrokerAgeNames(obj,'BrokerAgeName', accounts[i]));
    }
    return accountsDetails;
}*/

// array of BrokerAgeName's
var accounts = ['Fidelity','ETrade','Scottrade']


var fidelity = BrokerAgeNames(obj, 'BrokerAgeName', 'Fidelity');
var etrade = BrokerAgeNames(obj, 'BrokerAgeName', 'ETrade');
var scottrade = BrokerAgeNames(obj, 'BrokerAgeName', 'Scottrade');

var brokerAgeFidelity = '';
var brokerAgeEtrade = '';
var brokerAgeScottrade = '';

var subTotal = 0;
var value = 0;
// fidelity
for(var i = 0; i < fidelity.length; i++) {
     brokerAgeFidelity += '<span class="account">' + 
         '<span class="account-id">' + fidelity[i].Account + 
         '</span><span class="account-balance">' + fidelity[i].Balance + '</span></span>';
     
     subTotal += parseFloat(value) + parseFloat(fidelity[i].Balance);
}
document.getElementById("fidelity").innerHTML = brokerAgeFidelity;
document.getElementById("fidelity-subtotal").innerHTML = subTotal;

// eTrade
var subTotal = 0;
var value = 0;
for(var i = 0; i <...