how to assign the max value in an input html textbox from three consecutive numbers extracted from a pair of html table cell values with jquery

shankar_sb 0
Viewed 33

  1. There are dropdown boxes with labels -Current Level- and -Promotion in Level-. On selection of the options of these selection boxes, corresponding values will be populated in the Table Cells like - Current Pay Level - and -Promotion Pay Level-.

  2. On input of any value of the populated Current Pay Level table column in the Current Basic Textbox, consecutive three values will be highlighted on both table cells.

  3. The third highlighted value (that is the max value among the three highlighted values) in the -Promotion Pay Level- column should be assigned to the textbox id - nb.

  4. With the current jquery function, only the last pair comparison i.e. Level 13 and Level 13A from the Dropdown Select option boxes only showing the result in textbox id - nb.

  5. Eg. User will select level 7 in first option box and level 10 in another option box, assume that the current basic textbox is given with a value like 47600, consecutive values will be 47600, 49000 and 56100. So, here 56100 should be shown in the textbox id "nb".

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        
    
    
    <style>
    
    table#le7a{
        display:none;
    }
    
    table#le10a{
        display:none;
    }
    
    table#le10b{
        display:none;
    }
    
    table#le11a{
        display:none;
    }
    
    table#le11b{
        display:none;
    }
    
    table#le12a{
        display:none;
    }
    table#le12b{
        display:none;
    }
    table#le13a{
        display:none;
    }
    table#le13b{
        display:none;
    }
    table#le13ab{
        display:none;
    }
    
    .highlight
    {
    color:red;
    background-color:yellow;
    font-weight:bold;
    }
    
    .highlight2 {
      color: blue;
      background-color:white;
      font-weight: bold;
    }
    
    .highlight3 {
      color: green;
      background-color:yellow;
      font-weight: bold;
    }
    </style>
    
      </head>
      <body>
        <div class="container">
          <div class="row">
            <div class="col-md-3">
            
            
            </div>
            
            <div class="col-md-6">
                    
                    
                    <form action="index.php" method="post">
                     
                      <table width="100%" border="0">
                        <tr>
                            <td>Current Level</td><td><select class="form-control" name="cl" id="cl" autocomplete="off">
                                <option value="0">Select</option>
                                <option value="1">Level 7 (GP 4600/-)</option>
                                <option value="2">Level 10 (GP 5400/-)</option>
                                <option value="3">Level 11 (GP 6600/-)</option>
                                <option value="4">Level 12 (GP 7600/-)</option>
                                <option value="5">Level 13 (GP 8700/-)</option>
                                
                                
                            </select></td>
                            
                        </tr>
                        
                        <tr>
                            <td>Promotion in Level</td><td><select class="form-control" name="pl" id="pl" autocomplete="off">
                                <option value="0">Select</option>
                                <option value="1">Level 10 (GP 5400/-)</option>
                                <option value="2">Level 11 (GP 6600/-)</option>
                                <option value="3">Level 12 (GP 7600/-)</option>
                                <option value="4">Level 13 (GP 8700/-)</option>
                                <option value="5">Level 13A (GP 8900/-)</option>
                                
                            </select></td>
                            
                        </tr>
                        
                        <tr>
                            <td>Current Basic</td><td><input class="form-control" type="text" name="cb" id="cb"  autocomplete="off"/></td>
                            
                        </tr>
                        
                        <tr>
                            <td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc"  autocomplete="off"/></td>
                            
                        </tr>
                        
                        
                      </table>
                     
                       
                    </form>
                </div>
                
                
            
          </div>
          
        </div>
        
        
        <table class="table table-responsive">
            <tr>
                <td><h6>Current Pay Level</h6></td>
                <td><h6>Promotion Pay Level</h6></td>
                
                
            </tr>
            
            <tr>
                <td>
                <table id="le7a" class="table table-responsive">
                        
                        <tr><td>44900</td></tr>
                        <tr><td>46200</td></tr>
                        <tr><td>47600</td></tr>
                        <tr><td>49000</td></tr>
                        <tr><td>50500</td></tr>
                        <tr><td>52000</td></tr>
                        <tr><td>53600</td></tr>
                        <tr><td>55200</td></tr>
                        <tr><td>56900</td></tr>
                        <tr><td>58600</td></tr>
                        <tr><td>60400</td></tr>
                        <tr><td>62200</td></tr>
                        <tr><td>64100</td></tr>
                        <tr><td>66000</td></tr>
                        <tr><td>68000</td></tr>
                        <tr><td>70000</td></tr>
                        <tr><td>72100</td></tr>
                        <tr><td>74300</td></tr>
                    </table>
        
        <table id="le10a" class="table table-responsive table-striped">
                        
                        <tr><td>56100</td></tr>
                        <tr><td>57800</td></tr>
                        <tr><td>59500</td></tr>
                        <tr><td>61300</td></tr>
                        <tr><td>63100</td></tr>
                        <tr><td>65000</td></tr>
                        <tr><td>67000</td></tr>
                        <tr><td>69000</td></tr>
                        <tr><td>71100</td></tr>
                        <tr><td>73200</td></tr>
                        <tr><td>75400</td></tr>
                        <tr><td>77700</td></tr>
                    </table>
                    
                    <table  id="le11a" class="table table-responsive">
                        
                        <tr><td>67700</td></tr>
                        <tr><td>69700</td></tr>
                        <tr><td>71800</td></tr>
                        <tr><td>74000</td></tr>
                        <tr><td>76200</td></tr>
                        <tr><td>78500</td></tr>
                        <tr><td>80900</td></tr>
                        <tr><td>83300</td></tr>
                        <tr><td>85800</td></tr>
                        <tr><td>88400</td></tr>
                        <tr><td>91100</td></tr>
                        <tr><td>93800</td></tr>
                    </table>
                    
                    <table  id="le12a" class="table table-responsive">
                        
                        <tr><td>78800</td></tr>
                        <tr><td>81200</td></tr>
                        <tr><td>83600</td></tr>
                        <tr><td>86100</td></tr>
                        <tr><td>88700</td></tr>
                        <tr><td>91400</td></tr>
                        <tr><td>94100</td></tr>
                        <tr><td>96900</td></tr>
                        <tr><td>99800</td></tr>
                        <tr><td>102800</td></tr>
                        <tr><td>105900</td></tr>
                        <tr><td>109100</td></tr>
                    </table>
                    
                    <table  id="le13a" class="table table-responsive">
                        
                        <tr><td>123100</td></tr>
                        <tr><td>123800</td></tr>
                        <tr><td>130600</td></tr>
                        <tr><td>134500</td></tr>
                        <tr><td>138500</td></tr>
                        <tr><td>142700</td></tr>
                        <tr><td>147000</td></tr>
                        <tr><td>151400</td></tr>
                        <tr><td>155900</td></tr>
                        <tr><td>160600</td></tr>
                        <tr><td>165400</td></tr>
                        <tr><td>170400</td></tr>
                    </table>
                    
                </td>
                
                
                <td>
                <table id="le10b" class="table table-responsive">
                        
                        <tr><td>56100</td></tr>
                        <tr><td>57800</td></tr>
                        <tr><td>59500</td></tr>
                        <tr><td>61300</td></tr>
                        <tr><td>63100</td></tr>
                        <tr><td>65000</td></tr>
                        <tr><td>67000</td></tr>
                        <tr><td>69000</td></tr>
                        <tr><td>71100</td></tr>
                        <tr><td>73200</td></tr>
                        <tr><td>75400</td></tr>
                        <tr><td>77700</td></tr>
                    </table>
                
                
                    <table  id="le11b" class="table table-responsive">
                        
                        <tr><td>67700</td></tr>
                        <tr><td>69700</td></tr>
                        <tr><td>71800</td></tr>
                        <tr><td>74000</td></tr>
                        <tr><td>76200</td></tr>
                        <tr><td>78500</td></tr>
                        <tr><td>80900</td></tr>
                        <tr><td>83300</td></tr>
                        <tr><td>85800</td></tr>
                        <tr><td>88400</td></tr>
                        <tr><td>91100</td></tr>
                        <tr><td>93800</td></tr>
                    </table>
                    
                    <table  id="le12b" class="table table-responsive">
                        
                        <tr><td>78800</td></tr>
                        <tr><td>81200</td></tr>
                        <tr><td>83600</td></tr>
                        <tr><td>86100</td></tr>
                        <tr><td>88700</td></tr>
                        <tr><td>91400</td></tr>
                        <tr><td>94100</td></tr>
                        <tr><td>96900</td></tr>
                        <tr><td>99800</td></tr>
                        <tr><td>102800</td></tr>
                        <tr><td>105900</td></tr>
                        <tr><td>109100</td></tr>
                    </table>
                    
                    <table  id="le13b" class="table table-responsive">
                        
                        <tr><td>123100</td></tr>
                        <tr><td>123800</td></tr>
                        <tr><td>130600</td></tr>
                        <tr><td>134500</td></tr>
                        <tr><td>138500</td></tr>
                        <tr><td>142700</td></tr>
                        <tr><td>147000</td></tr>
                        <tr><td>151400</td></tr>
                        <tr><td>155900</td></tr>
                        <tr><td>160600</td></tr>
                        <tr><td>165400</td></tr>
                        <tr><td>170400</td></tr>
                    </table>
                    
                    
                    <table  id="le13ab" class="table table-responsive">
                        
                        <tr><td>131100</td></tr>
                        <tr><td>135000</td></tr>
                        <tr><td>139100</td></tr>
                        <tr><td>143300</td></tr>
                        <tr><td>147600</td></tr>
                        <tr><td>152000</td></tr>
                        <tr><td>156600</td></tr>
                        <tr><td>161300</td></tr>
                        <tr><td>166100</td></tr>
                        <tr><td>171100</td></tr>
                        <tr><td>176200</td></tr>
                        <tr><td>181500</td></tr>
                    </table>
    
    
                </td>
                
                
                 <td>
                        Next Basic</td><td><input class="form-control" type="text" name="nb" id="nb"  autocomplete="off"/>
                    </td>
            </tr>
            
            
        
        </table>
         
    
        <script type="text/javascript" src="js/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
    $('#dop').change( function(){
         $('#pf').val($(this).val());
    });
    });
    </script>
    
    <script>
    $(document).ready(function(){
        $('#cl').on('change', function() {
          if ( this.value == '1')
          
          {
            $("#le7a").show();
          }
          else
          {
            $("#le7a").hide();
          }
          
          
        });
    });
    
    $(document).ready(function(){
        $('#cl').on('change', function() {
          if ( this.value == '2')
          
          {
            $("#le10a").show();
          }
          else
          {
            $("#le10a").hide();
          }
          
          
        });
    });
    
    $(document).ready(function(){
        $('#cl').on('change', function() {
          if ( this.value == '3')
          
          {
            $("#le11a").show();
          }
          else
          {
            $("#le11a").hide();
          }
          
          
        });
    });
    
    $(document).ready(function(){
        $('#cl').on('change', function() {
          if ( this.value == '4')
          
          {
            $("#le12a").show();
          }
          else
          {
            $("#le12a").hide();
          }
          
          
        });
    });
    
    $(document).ready(function(){
        $('#cl').on('change', function() {
          if ( this.value == '5')
          
          {
            $("#le13a").show();
          }
          else
          {
            $("#le13a").hide();
          }
          
          
        });
    });
    
    
    
    $(document).ready(function(){
        $('#pl').on('change', function() {
          if ( this.value == '1')
          
          {
            $("#le10b").show();
          }
          else
          {
            $("#le10b").hide();
          }
        });
    });
    
    $(document).ready(function(){
        $('#pl').on('change', function() {
          if ( this.value == '2')
          
          {
            $("#le11b").show();
          }
          else
          {
            $("#le11b").hide();
          }
        });
    });
    
    $(document).ready(function(){
        $('#pl').on('change', function() {
          if ( this.value == '3')
          
          {
            $("#le12b").show();
          }
          else
          {
            $("#le12b").hide();
          }
        });
    });
    
    $(document).ready(function(){
        $('#pl').on('change', function() {
          if ( this.value == '4')
          
          {
            $("#le13b").show();
          }
          else
          {
            $("#le13b").hide();
          }
        });
    });
    
    $(document).ready(function(){
        $('#pl').on('change', function() {
          if ( this.value == '5')
          
          {
            $("#le13ab").show();
          }
          else
          {
            $("#le13ab").hide();
          }
        });
    });
    </script>
    
    
    <!--Level 07 to 10 fixation starts-->
    <script>
    $(function () {
    
            // get values from table le10b for comparison
            let tableValues = [];
            $('#le10b tr td').each(function () {
                tableValues.push(this.innerHTML)
            });
    
            $('#cb').on('change keyup', function () {
                var search = $(this).val();
    
                // clear classes and init values
                $('#le7a tr').removeClass('highlight highlight2');
                $('#le10b tr').removeClass('highlight3');
                $('#nb').val('');
                 
                // find values in #le7a
                var aftinc = 0;
                $('#le7a tr td').each(function () {
                    if ($(this).text() == search) {
                        $(this).parent('tr').addClass('highlight');
                        $(this).parent('tr').next().addClass('highlight2');
                        aftinc = $(this).parent('tr').next().text();
                        $('#aftinc').val(aftinc);
                    }
                });
    
                // if values found, find next higher value in #le10
                if (aftinc > 0) {
                    var closest = tableValues.reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });
    
                    // check value found
                    if (closest - aftinc > 0) {
                        $('#le10b tr td').each(function () {
                            if (this.innerHTML === closest) {
                                // highlight the next higher value
                                $(this).parent('tr').addClass('highlight3');
                                var nb = $(this).parent('tr').text();
                                 $('#nb').val(nb);
                            }
                            
                        });
                       
                    }
                }
                
            });
        });
    </script>
    <!--Level 7 to 10 fixation Ends-->
    
    <!--Level 10 to 11 fixation starts-->
    <script>
    $(function () {
    
            // get values from table le11b for comparison
            let tableValues = [];
            $('#le11b tr td').each(function () {
                tableValues.push(this.innerHTML)
            });
    
            $('#cb').on('change keyup', function () {
                var search = $(this).val();
    
                // clear classes and init values
                $('#le10a tr').removeClass('highlight highlight2');
                $('#le11b tr').removeClass('highlight3');
                $('#nb').val('');
                 
                // find values in #le10a
                var aftinc = 0;
                $('#le10a tr td').each(function () {
                    if ($(this).text() == search) {
                        $(this).parent('tr').addClass('highlight');
                        $(this).parent('tr').next().addClass('highlight2');
                        aftinc = $(this).parent('tr').next().text();
                        $('#aftinc').val(aftinc);
                    }
                });
    
                // if values found, find next higher value in #le11b
                if (aftinc > 0) {
                    var closest = tableValues.reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });
    
                    // check value found
                    if (closest - aftinc > 0) {
                        $('#le11b tr td').each(function () {
                            if (this.innerHTML === closest) {
                                // highlight the next higher value
                                $(this).parent('tr').addClass('highlight3');
                            }
                        });
                        $('#nb').val(closest);
                    }
                }
            });
        });
    </script>
    <!--Level 10 to 11 fixation Ends-->
    
    
    <!--Level 11 to 12 fixation starts-->
    <script>
    $(function () {
    
            // get values from table le12b for comparison
            let tableValues = [];
            $('#le12b tr td').each(function () {
                tableValues.push(this.innerHTML)
            });
    
            $('#cb').on('change keyup', function () {
                var search = $(this).val();
    
                // clear classes and init values
                $('#le11a tr').removeClass('highlight highlight2');
                $('#le12b tr').removeClass('highlight3');
                $('#nb').val('');
                 
                // find values in #le11a
                var aftinc = 0;
                $('#le11a tr td').each(function () {
                    if ($(this).text() == search) {
                        $(this).parent('tr').addClass('highlight');
                        $(this).parent('tr').next().addClass('highlight2');
                        aftinc = $(this).parent('tr').next().text();
                        $('#aftinc').val(aftinc);
                    }
                });
    
                // if values found, find next higher value in #le12b
                if (aftinc > 0) {
                    var closest = tableValues.reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });
    
                    // check value found
                    if (closest - aftinc > 0) {
                        $('#le12b tr td').each(function () {
                            if (this.innerHTML === closest) {
                                // highlight the next higher value
                                $(this).parent('tr').addClass('highlight3');
                            }
                        });
                        $('#nb').val(closest);
                    }
                }
            });
        });
    </script>
    <!--Level 11 to 12 fixation Ends-->
    
    <!--Level 12 to 13 fixation starts-->
    <script>
    $(function () {
    
            // get values from table le13b for comparison
            let tableValues = [];
            $('#le13b tr td').each(function () {
                tableValues.push(this.innerHTML)
            });
    
            $('#cb').on('change keyup', function () {
                var search = $(this).val();
    
                // clear classes and init values
                $('#le12a tr').removeClass('highlight highlight2');
                $('#le13b tr').removeClass('highlight3');
                $('#nb').val('');
                 
                // find values in #le12a
                var aftinc = 0;
                $('#le12a tr td').each(function () {
                    if ($(this).text() == search) {
                        $(this).parent('tr').addClass('highlight');
                        $(this).parent('tr').next().addClass('highlight2');
                        aftinc = $(this).parent('tr').next().text();
                        $('#aftinc').val(aftinc);
                    }
                });
    
                // if values found, find next higher value in #le13b
                if (aftinc > 0) {
                    var closest = tableValues.reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });
    
                    // check value found
                    if (closest - aftinc > 0) {
                        $('#le13b tr td').each(function () {
                            if (this.innerHTML === closest) {
                                // highlight the next higher value
                                $(this).parent('tr').addClass('highlight3');
                            }
                        });
                        $('#nb').val(closest);
                    }
                }
            });
        });
    </script>
    <!--Level 12 to 13 fixation Ends-->
    
    
    <!--Level 13 to 13a fixation starts-->
    <script>
    $(function () {
    
            // get values from table le13ab for comparison
            let tableValues = [];
            $('#le13ab tr td').each(function () {
                tableValues.push(this.innerHTML)
            });
    
            $('#cb').on('change keyup', function () {
                var search = $(this).val();
    
                // clear classes and init values
                $('#le13a tr').removeClass('highlight highlight2');
                $('#le13ab tr').removeClass('highlight3');
                $('#nb').val('');
                 
                // find values in #le13a
                var aftinc = 0;
                $('#le13a tr td').each(function () {
                    if ($(this).text() == search) {
                        $(this).parent('tr').addClass('highlight');
                        $(this).parent('tr').next().addClass('highlight2');
                        aftinc = $(this).parent('tr').next().text();
                        $('#aftinc').val(aftinc);
                    }
                });
    
                // if values found, find next higher value in #le13ab
                if (aftinc > 0) {
                    var closest = tableValues.reduce((prev, curr) => {
                        return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                    });
    
                    // check value found
                    if (closest - aftinc > 0) {
                        $('#le13ab tr td').each(function () {
                            if (this.innerHTML === closest) {
                                // highlight the next higher value
                                $(this).parent('tr').addClass('highlight3');
                            }
                        });
                        $('#nb').val(closest);
                    }
                }
            });
        });
    </script>
    <!--Level 13 to 13a fixation Ends-->
      </body>
jquery html
1 Answers

I'm not sure whether the values in the select and tables are static, but give this a try. I have simplified your code and not completely tested

$(function(){

        var cplData = {
            'le7a' : [44900,46200,47600,49000,50500,52000,53600,55200,56900,58600,60400,62200,64100,66000,68000,70000,72100,74300],
            'le10a' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700],
            'le11a' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800],
            'le12a' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100],
            'le13a' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400]
        }

        var pplData = {
            'le10b' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700],
            'le11b' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800],
            'le12b' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100],
            'le13b' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400],
            'le13ab' : [131100,135000,139100,143300,147600,152000,156600,161300,166100,171100,176200,181500]
        }


        $('#cl').on('change', function() 
        {
            var dataId = $('option:selected', this).data('id');
            $('#cb, #aftinc, #nb').val('');
            $('#CPLholder').find('table tr').removeClass('highlight highlight2');
            $('#PPLholder').find('table tr').removeClass('highlight3');
            if(dataId)
            {
                $('#CPLholder').html(createTable(dataId,'cpl'));
            }
            else
            {
               $('#CPLholder').html('');
            }
        });


        $('#pl').on('change', function() 
        {
            var dataId = $('option:selected', this).data('id');
            $('#cb, #aftinc, #nb').val('');
            $('#CPLholder').find('table tr').removeClass('highlight highlight2');
            $('#PPLholder').find('table tr').removeClass('highlight3');
            if(dataId)
            {
                $('#PPLholder').html(createTable(dataId,'ppl'));
            }
            else
            {
               $('#PPLholder').html(''); 
            }
        });


        function createTable(dataId,plType)
        {
            var table = $('<table id="'+dataId+'" class="table table-responsive">');
            var data = (plType == 'cpl') ? cplData[dataId] : pplData[dataId];
            $.each(data, function(i, item) 
            {
                table.append('<tr><td>' + item + '</td></tr>');
            });        
            return table;
        }

        $('#cb').on('change keyup', function () 
        {
            var search = $(this).val();
            var activeCPL = $('#'+$('#CPLholder').find('table').attr('id'));
            var pplId = $('#PPLholder').find('table').attr('id');
            var activePPL = $('#'+pplId);

            if(activeCPL != undefined) activeCPL.find('tr').removeClass('highlight highlight2');
            $('#aftinc').val('');
            if(activePPL != undefined) activePPL.find('tr').removeClass('highlight3');

            var aftinc = 0;

            activeCPL.find('tr').find('td').each(function()
            {
                if($(this).text() == search)
                {
                    $(this).parent('tr').addClass('highlight');
                    $(this).parent('tr').next().addClass('highlight2');
                    aftinc = $(this).parent('tr').next().text();
                    $('#aftinc').val(aftinc);
                }
            });
            
            if(aftinc > 0)
            {
                var closest = pplData[pplId].reduce((prev, curr) => {
                    return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
                });                
            }

            if (closest - aftinc > 0) 
            {
                activePPL.find('tr').find('td').each(function()
                {
                    if (this.innerHTML == closest) 
                    {
                        $(this).parent('tr').addClass('highlight3');
                        var nb = $(this).parent('tr').text();
                        $('#nb').val(nb);
                    }
                });
            }

        });

    });
.highlight
    {
    color:red;
    background-color:yellow;
    font-weight:bold;
    }
    
    .highlight2 {
      color: blue;
      background-color:white;
      font-weight: bold;
    }
    
    .highlight3 {
      color: green;
      background-color:yellow;
      font-weight: bold;
    }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form action="index.php" method="post">                
                <table width="100%" border="0">
                    <tr>
                        <td>Current Level</td>
                        <td>
                            <select class="form-control" name="cl" id="cl" autocomplete="off">
                                <option value="0" data-id="">Select</option>
                                <option value="1" data-id="le7a">Level 7 (GP 4600/-)</option>
                                <option value="2" data-id="le10a">Level 10 (GP 5400/-)</option>
                                <option value="3" data-id="le11a">Level 11 (GP 6600/-)</option>
                                <option value="4" data-id="le12a">Level 12 (GP 7600/-)</option>
                                <option value="5" data-id="le13a">Level 13 (GP 8700/-)</option>
                            </select>                            
                        </td>
                    </tr>                
                    <tr>
                        <td>Promotion in Level</td>
                        <td>
                            <select class="form-control" name="pl" id="pl" autocomplete="off">
                                <option value="0" data-id="">Select</option>
                                <option value="1" data-id = "le10b">Level 10 (GP 5400/-)</option>
                                <option value="2" data-id = "le11b">Level 11 (GP 6600/-)</option>
                                <option value="3" data-id = "le12b">Level 12 (GP 7600/-)</option>
                                <option value="4" data-id = "le13b">Level 13 (GP 8700/-)</option>
                                <option value="5" data-id = "le13ab">Level 13A (GP 8900/-)</option>                        
                            </select>
                        </td>                    
                    </tr>                
                    <tr>
                        <td>Current Basic</td>
                        <td><input class="form-control" type="text" name="cb" id="cb"  autocomplete="off"/></td>                    
                    </tr>                
                    <tr>
                        <td>after one increment</td>
                        <td><input class="form-control" type="text" name="aftinc" id="aftinc"  autocomplete="off"/></td>                    
                    </tr>
                    </table>
                </form>
        </div>
    
        <table class="table table-responsive table-bordered">
            <tr>
                <th>Current Pay Level</th>
                <th>Promotion Pay Level</th>
                <th>Next Basic</th>
            </tr>
            <tr>
                <td id="CPLholder">&nbsp;</td>
                <td id="PPLholder">&nbsp;</td>
                <td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off"/></td>
            </tr>
        </table>    
    </div>  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Snm0
Related