JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> <!-- Using HTML 5 -->
<html>
    <head>
        <title>My Portfolio</title>
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    <!-- Using jQuery 1.8.3 -->
        <script type="text/javascript" src="custom.js"></script>
        
        <link rel="stylesheet" type="text/css" href="styles.css"></link>
    </head>
    
    <body>
        <div class="container">
            <div class="content">
                <div class="overview">
                    <p><strong>Portfolio Value:</strong> $<span id="portfolioValue"></span></p>
                    <p><strong>Total Budget:</strong> $1000</p>
                </div>

                <div class="details">
                    <table border="1">
                        <thead>
                            <tr>
                                <th>Company Name</th><th>Symbol</th><th>Price per stock</th><th>Stock(s) Owned</th><th colspan="2">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><span id="name0"></span></td><td><span id="symbol0"></span></td><td>$<span id="price0"></span></td><td><span id="owned0"></span></td><td><button id="company1buy" name="buy0" class="buy">Buy</button></td><td><button name="sell0" class="sell">Sell</button></td>
                            </tr>
                            <tr>
                                <td><span id="name1"></span></td><td><span id="symbol1"></span></td><td>$<span id="price1"></span></td><td><span id="owned1"></span></td><td><button id="company2buy" name="buy1" class="buy">Buy</button></td><td><button name="sell1" class="sell">Sell</button></td>
                            </tr>
                            <tr>
                                <td><span id="name2"></span></td><td><span id="symbol2"></span></td><td>$<span id="price2"></span></td><td><span...

JavaScript

$(document).ready(function(){
    var companies = [
        {
            name : 'Apple'
            , symbol : 'AAPL'
            , price : 577
            , owned : 0
        },
        {
            name: 'Google'
            , symbol : 'GOOG'
            , price : 650
            , owned : 0
        },
        {
            name : 'JP Morgan Chase'
            , symbol : 'JPM'
            , price : 33
            , owned : 0
        },
        {
            name : 'Microsoft'
            , symbol : 'MSFT'
            , price : 35
            , owned : 0
        },
        {
            name : 'Facebook'
            , symbol : 'FB'
            , price : 27
            , owned : 0
        }
    ];

    var budget = 1000;                    // total budget for stocks
    var portfolioValue = 0;                // initial portfolio portfolioValue
    $('#portfolioValue').html('0');        // set initial portfolio value as zero
    
    for(var i=0; i < companies.length; i++) {
       $('#name'+i).html(companies[i].name);     
       $('#symbol'+i).html(companies[i].symbol); 
       $('#price'+i).html(companies[i].price); 
       $('#owned'+i).html(companies[i].owned); 
    }

    $(".buy").click(function(){
        var id = this.name.substr(this.name.length - 1);    // names of all buy button elements are preceded with string 'buy' followed by a unique number
        if((portfolioValue + companies[id].price) > 1000)
            alert("Unable to buy this stock, running out of budget!\nNeed $" + Number((portfolioValue + companies[id].price) - 1000) + " more.");
        else{
            companies[id].owned++;
            $('#owned'+id).html(companies[id].owned);
            portfolioValue += companies[id].price;
            $('#portfolioValue').html(portfolioValue);
        }
    });

    $(".sell").click(function(){
        var id = this.name.substr(this.name.length - 1);    // names of all sell button elements are preceded with string 'sell' followed by a unique...