JSFiddle - React, Tailwind, and code Playground

by dezinezoo

HTML

<form method="post" target="_top" name="shop">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="################">
    <table>
        <tr>
            <td>
                <input type="checkbox" name="os1" value="X" onClick="return KeepCount()">Map
                <input type="hidden" name="on1" value="map">
                <br/>
                <input type="checkbox" name="os2" value="X" onClick="return KeepCount()">Social Media
                <input type="hidden" name="on2" value="socialmedia">
                <br/>
                <input type="checkbox" name="os3" value="X" onClick="return KeepCount()">E-Mail Registration
                <input type="hidden" name="on3" value="email">
                <br/>
                <input type="checkbox" name="os4" value="X" onClick="return KeepCount()">Contact Form
                <input type="hidden" name="on4" value="contact">
                <br/>
                <input type="checkbox" name="os5" value="X" onClick="return KeepCount()">Video
                <input type="hidden" name="on5" value="video">
                <br/>
                <input type="checkbox" name="os6" value="X" onClick="return KeepCount()">Gallery
                <input type="hidden" name="on6" value="gallery">
                <br/>
                <input type="checkbox" name="os6" value="X" onClick="return KeepCount()">Gallery
                <input type="hidden" name="on6" value="gallery">
                <br/>
            </td>
        </tr>
    </table>
    </div>
</form>
<p id="results"></p>

JavaScript

function KeepCount() {

    var NewCount = 0;

    if (document.shop.os1.checked) {
        NewCount = NewCount + 1;
    }

    if (document.shop.os2.checked) {
        NewCount = NewCount + 1;
    }

    if (document.shop.os3.checked) {
        NewCount = NewCount + 1;
    }

    if (document.shop.os4.checked) {
        NewCount = NewCount + 1;
    }

    if (document.shop.os5.checked) {
        NewCount = NewCount + 1;
    }

    if (document.shop.os6.checked) {
        NewCount = NewCount + 1;
    }

    if (NewCount >= 1) {
        document.getElementById("results").innerHTML = " Please Choose at least 3 features";
    }
    if (NewCount >= 2) {
        document.getElementById("results").innerHTML = " Please Choose at least 3 features";
    }
    if (NewCount >= 3) {
        document.getElementById("results").innerHTML = " <b>Silver</b> $299";
    }
    if (NewCount >= 4) {
        document.getElementById("results").innerHTML = " <b>Silver1</b> $299";
    }

    if (NewCount >= 5) {
        document.getElementById("results").innerHTML = " <b>Silver2</b> $299";
    }

    if (NewCount >= 6) {
        document.getElementById("results").innerHTML = " <b>contact</b>";
    }

}