JSFiddle - React, Tailwind, and code Playground

by Ahmad SM

HTML

<table border='1'>
<th>Issued Type</th>
<th colspan="2">
<select class="click">
<option value="">-Choose-</option>
<option value="1">Warehouse 1 to Warehouse 2</option>
<option value="2">Warehouse 1 to Warehouse 3</option>
</select>
</th>
</tr>
<tr>
<th>Name</th>
<th class="target">
<input type="text"/>
</th>
<th class="target1">
<input type="radio"  name="from" value="Warehouse 1"/>Warehouse 1
<input type="radio"  name="from" value="Warehouse 2"/>Warehouse 2
<input type="radio"  name="from" value="Warehouse 3"/>Warehouse 3
<input type="radio"  name="from" value="Warehouse 4"/>Warehouse 4
</th>
</tr>
</table>

CSS

.js-action {
    cursor: pointer;
    border-bottom:1px dashed #555;
}

.wrap-js-action {
    margin:15px 0 0 0;
}

JavaScript

$(document).ready(function() {
$('.click').change(function() {
    if ($('.click').val() == '1') {
        $('.target').show();
        $('.target1').hide();
    } else if ($('.click').val() == '2'){
        $('.target1').show();
        $('.target').hide();
    }else{
    	  $('.target').show();
        $('.target1').hide();
    }
});
});