JSFiddle - React, Tailwind, and code Playground

HTML

<form name="Web Order Form" id="Web Order Form">
    <table style="position:absolute; left:580px; top:210px; height:34px;" border="0" bordercolor="#FFFFFF" style="background-color:#FFFFFF" width="50%" cellpadding="5" cellspacing="5">
        <tr style="position:absolute; left:0px; top:-42px;">
            <td>Select Report:</td>
            <label style="font-size:16px" for="comparator">Comparator:</label>
            <td>
                <select id="comparator" name="comparator" onChange="return changeTextBox();">
              <option value="please_select" id="please_select">Please Select...</option>
                    <option value="billing_report" id="billing_report">Billing Report</option>
                    <option value="courier_report" id="courier_report">Courier Report</option>
                    <option value="management_summary_report" id="management_summary_report">Management Summary Report</option>
                    <option value="production_report" id="production_report">Production Report</option>
                    <option value="prospect_list" id="prospect_list">Prospect List</option>
                    <option value="staff_absence_report" id="staff_absence_report">Staff Absence Report</option>
                    <option value="stock_report" id="stock_report">Stock Report</option>
                </select>
                <label style="font-size:16px" for="to">Value:</label>
                <input type="number" id="value" disabled/>
            </td>
        </tr>
        <tr>
            <div style="position:absolute; left:545px; top:130px; width:510px; height:420px;  border:1px solid black">
                <tr>
                    <td>From:</td>
                    <td>
                        <input type="input" value="from" id="from">
                    </td>
                    <td>To:</td>
                    <td>
                        <input type="input" value="to" id="to">
                    </td>
                </tr>
       ...

JavaScript

function changeTextBox()
{
    var comp = document.getElementById('comparator');
    resetFields();
    if (comp.value == 'billing_report') {
        document.getElementById('from').disabled = false;
        document.getElementById('to').disabled = false;
        document.getElementById('company').disabled = false;
        document.getElementById('salesperson').disabled = false; 
    } else if (comp.value == 'courier_report') {
        // Enable the fields you want   
    }
}

function resetFields() {
    document.getElementById('from').disabled = true;
    document.getElementById('to').disabled = true;
    document.getElementById('component').disabled = true;
    document.getElementById('company').disabled = true;
    document.getElementById('job_no').disabled = true;
    document.getElementById('salesperson').disabled = true; 
    document.getElementById('staff_name').disabled = true;
}