JSFiddle - React, Tailwind, and code Playground

HTML

<h1>CIS 122 Lab 4</h1>

<div class="container">
    
<h2>SORT-O-COIN</h2>

    <form name="clubForm" style="margin-bottom: 10px;">
        <div style="margin-left: 10px;">Coin Jar
            <input name="coinJar" size="40" type="text" />
        </div>
        <p>Number of pennies: <span name="pennies"></span>
        </p>
        <p>Number of nickels: <span name="nickels"></span>
        </p>
        <p>Number of dimes: <span name="dimes"></span>
        </p>
        <p>Number of quarters: <span name="quarters"></span>
        </p>
        <p>Number of half-dollars: <span name="halfdollars"></span>
        </p>
        <p>Total number of coins: <span name="totalCoins"></span>
        </p>
        <p>Total value: <span name="totalValue"></span>
        </p>
        <input id="count" value="Count the coins" onclick="countCoins()" type="button" />
    </form>
</div>

CSS

.container {
            border: 1px solid black;
            border-radius: 15px;
            width: 350px;
            margin: 25px auto;
            padding: 10px;
        }
        .result {
            width: 175px;
            float: left;
        }
        p {
            margin: 5px 0 0 5px;
        }
        .clear {
            clear: both;
        }
        input[type='button'] {
            margin: 10px 0 0 5px;
        }

JavaScript

function countCoins () {
     // Add your code here to count the coins and display your answers
    var coinJar = document.getElementsByName("coinJar")[0].value; //first get the value
    var coinArray = coinJar.split(","); //split it
    var values = [0.01, 0.02, 0.05, 0.10, 0.25, 0.50]; //coin values
    var ids = ['pennies', 'nickels', 'dimes', 'quarters', 'halfdollars']; //ids of coins*
    var total; //total dollar amount
    var coinnumber; //amount of coins.

    for (var i = 0; i < coinArray.length; i++) {
        var currentvalue = parseInt(coinArray[i]); //value of current coin
        document.getElementsByName(ids[i])[0].innerHTML = currentvalue; //set the html
        total += currentvalue * values[i];
        coinnumber += currentvalue;

    }
    document.getElementsByName('totalValue')[0].innerHTML = total;
    document.getElementsByName('totalCoins')[0].innerHTML = coinnumber;


}