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

$(document).ready(function () {
    dropdowns = {
        web: [
            {desc: "1 Custom Web Page", price: 39},
            {desc: "5 Custom Web Pages", price: 190},
            {desc: "10 Custom Web Pages", price: 375},
            {desc: "20 Custom Web Pages", price: 710}
        ],
        art: [{desc: '300-word Article x 1', price: 7.00},
              {desc: '300-word Article x 5', price: 32.00},
              {desc: '400-word Article x 1', price: 8.00},
              {desc: '400-word Article x 5', price: 37.00},
              {desc: '500-word Article x 1', price: 9.00},
              {desc: '500-word Article x 5', price: 40.00},
              {desc: '700-word Article x 1', price: 12.00},
              {desc: '700-word Article x 5', price: 57.00},
              {desc: '1000-word Article x 1', price: 15.00},
              {desc: '1000-word Article x 5', price: 70.00}],
        blog: [{desc: '300-word Custom Blog x 1', price: 10},
               {desc: '400-word Custom Blog x 1', price: 12},
               {desc: '500-word Custom Blog x 1', price: 14},
               {desc: '300-word Custom Blog x 5', price: 47},
               {desc: '400-word Custom Blog x 5', price: 55},
               {desc: '500-word Custom Blog x 5', price: 63}
              ],
        press: [{desc: '300-word Custom Press Release', price: 27},
                {desc: '400-word Custom Press Release', price: 37},
                {desc: '500-word Custom Press Release', price: 47}
               ]
    }

    populateSelect();

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

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

        dropdowns[cat].forEach(function(item) {
            $('#item').append($('<option/>', {
                value: item.price,
                text: item.desc+' = $'+item.price
            }));
        });
    }

});