JSFiddle - React, Tailwind, and code Playground

HTML

<div class="articles">
    <form method="GET" action=_output.html>
        <table align="left">
<tr><th><label for="id_environment">Number of service ports (IP/port pairing)</label></th><td><select  name="environment" id="id_environment">
<option value="">Select</option>
<option value="A">1</option>
<option value="B">2</option>
<option value="C">3</option>
</select></td></tr>

Port Number: <input type="number" name="service_port1">
<tr><th><label for="id_A">Service Port 1</label></th><td><select name="node1" id="id_Z">
<option value="A1">A</option>
</select></td></tr>

<tr><th><label for="id_B">Select a partition</label></th><td><select name="node2" id="id_B">
<option value="B">B</option>
</select></td></tr>

<tr><th><label for="id_C">Select a partition</label></th><td><select name="node3" id="id_C">
<option value="C">C</option>
</select></td></tr>

</table>                  
</form>
</div>

JavaScript

$(document).ready(function() {
    var $node1 = $('#id_A').closest('tr').hide();
    var $node2 = $('#id_B').closest('tr').hide();    
    var $node3 = $('#id_C').closest('tr').hide();

    $('#id_environment').change(function() {         
        var selectedValue = $(this).val();
        
        if(selectedValue  === 'A') {
        		$node1.show();
            $node2.hide();
            $node3.hide();
        } else if (selectedValue === 'B') {
        		$node1.show();
            $node2.show();
            $node3.hide();
        } else if (selectedValue === 'C') {
        		$node1.show();
            $node2.show();
            $node3.show();            
        } else {
        		$node1.hide();
            $node2.hide();
            $node3.hide(); 
        }
    });
});