JSFiddle - React, Tailwind, and code Playground

HTML

<form name="test" method="post" action="check.php">
    <p style="text-align: center;"><span style="color: #800000;"><strong><span style="font-size: x-large; font-family: arial, helvetica, sans-serif;">Article Writing Order Form</span>
        </strong>
        </span>
    </p>&nbsp;
    <table style="text-align: left; width: 100%; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" border="0" cellspacing="3" cellpadding="2">
        <tbody>
            <tr>
                <td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2">Personal Information:
                    <hr />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Name :</td>
                <td style="vertical-align: top; width: 500px;">
                    <input style="height: 28px; width: 220px;" type="text" name="name" /> <span style="color: #ff0000;">*</span>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Email :</td>
                <td style="vertical-align: top; width: 500px;">
                    <input style="height: 28px; width: 220px;" type="text" name="email" /><span style="color: #ff0000;"> *</span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2">Order Information:
                    <hr />
                </td>
            </tr>
            <tr>
                <td style="font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2">Please provide...

JavaScript

//<![CDATA[ 
$(window).load(function () {
    web = new Array("1 Custom Web Page = $39", "5 Custom Web Pages= $190", "10 Custom Web Pages = $375", "20 Custom Web Pages = $710");
    art = new Array('300-word Article x 1 = $7.00', '300-word Article x 5 = $32.00', '400-word Article x 1 = $8.00', '400-word Article x 5 = $37.00', '500-word Article x 1 = $9.00', '500-word Article x 5 = $40.00', '700-word Article x 1 = $12.00', '700-word Article x 5 = $57.00', '1000-word Article x 1 = $15.00', '1000-word Article x 5 = $70.00');
    blog = new Array('300-word Custom Blog x 1 = $10', '400-word Custom Blog x 1 = $12', '500-word Custom Blog x 1 = $14', '300-word Custom Blog x 5 = $47', '400-word Custom Blog x 5 = $55', '500-word Custom Blog x 5 = $63');
    press = new Array('300-word Custom Press Release = $27', '400-word Custom Press Release = $37', '500-word Custom Press Release = $47');

    populateSelect();

    $(function () {

        $('#cat').change(function () {
            populateSelect();
        });

    });


    function populateSelect() {
        cat = $('#cat').val();
        $('#item').html('');

        eval(cat).forEach(function (t) {
            $('#item').append('<option>' + t + '</option>');
        });
    }




});