JSFiddle - React, Tailwind, and code Playground

by Ceylo

HTML

<div id="form_table">
        
                   <table id="form_table_tag" align="center" cellpadding="0" cellspacing="0" width="50%" border="1" >
                <tr>
                    <td id="table_head">Index</td>
                    <td id="table_head">Items</td>
                    <td id="table_head">Capacity</td>
                    <td id="table_head">Unit price</td>
                    <td id="table_head">Qty</td>
                    <td id="table_head">Subtotal</td>
                </tr>
                
                <tr class="table_row_blue" id="table_row_blue1">
                    <td class="table_data_index"  id="table_data_index1">1</td>
                    <td><select class="form_items" id="form_items1" onchange="javascript:cap_check();">
                    <option ></option>
                    <option value="def"> --------- </option>
                    <option value="UD-05">UD-05</option>
                    <option value="PD-71">PD-71</option>
                    <option value="def"> --------- </option> 
                    <option value="MicroSD">MicroSD</option>  
                    <option value="SD">SD</option>  
                    <option value="def"> --------- </option> 
                    <option value="E-HDD">E-HDD</option>     
                        </select></td>
                        
                    <td><select class="cap" id="cap1" disabled="disabled">
                        <option >  </option>
                         </select></td>
                    <td class="table_data_label_sign" id="table_data_label_sign1">Rs.<input disabled="disabled" type="text" size="8" id="form_price1" onkeypress="return onlynum(event)" onchange="javascript:subtotal();"></td>
                    <td class="table_data_label_sign" id="table_data_label_sign1"><input disabled="disabled" type="text" size="7" id="form_qty1" onkeypress="return onlynum(event)"  onchange="javascript:subtotal();"></td>
                    <td...

JavaScript

function cap_check(){

     

                    $(function() {
                        $('td').change(function() {
                            var row = $(this).parent().find('td:first').text();
                            //alert(row);
                  
    
         
         //rest of the script uses row number for dynamic generations       

     var item_cat,item=document.getElementById("form_items"+row).value;  
      if(item=="UD-05" || item=="PD-71" || item=="MicroSD" || item=="SD"){
          item_cat="flash";
          
      }
      else if(item=="E-HDD"){
          item_cat="ehdd";
      };
     var capacity=document.getElementById('cap'+row); 
     var price=document.getElementById('form_price'+row); 
     var qty=document.getElementById('form_qty'+row); 
 if(item_cat=="flash"){ 
         capacity.disabled=false;                
         price.disabled=false;                
         qty.disabled=false;                
         capacity.innerHTML="<option> </option><option> 2GB </option><option> 4GB </option><option> 8GB </option><option> 16GB </option><option> 32GB </option><option> 64GB </option>"; 
     }
     else if(item_cat=="ehdd"){
         capacity.disabled=false; 
         capacity.innerHTML="<option>  </option><option> 320GB </option><option> 500GB </option><option> 640GB </option><option> 1TB </option>";
     }
     else{
         capacity.innerHTML="<option selected='selected'>  </option>";
         capacity.disabled=true; 
     }
           });
                    });
    
     };