title: jquery function to identify an input value upto 3 levels in two html table cell values and set the max value in the input textbox
body: <ol>
  <li><p>there is an input textbox with the name Basic (id=cb) and two html table cell values with ids le10 and le11. I have to check the input value upto 3 consecutive levels (2 values from 1st table and 3rd one from 2nd table).</p>
  </li>
  <li><p>say for eg. if the input value is 69000, the two cell values of table id le10 i.e. 69000 and 71100 to be highlighted (its working with the jquery function)</p>
  </li>
  <li><p>The 3rd value is to be set in the table id le11.  The very next higher value to the 71100 is 71800 in the 2nd table i.e. id le11.  This 71800 to be shown in the input box id= nb.</p>
  </li>
  </ol>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
        &lt;head&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/bootstrap.css&quot;&gt;
      &lt;style&gt;
      .highlight
      {
      color:red;
      background-color:yellow;
      font-weight:bold;
      }
      .highlight2 {
        color: blue;
        background-color: yellow;
        font-weight: bold;
      }
      
      .highlight3 {
        color: green;
        background-color: yellow;
        font-weight: bold;
      }
      &lt;/style&gt;
      &lt;/head&gt;
        &lt;body&gt;
          &lt;div class=&quot;container&quot;&gt;
            &lt;div class=&quot;row&quot;&gt;
                  &lt;div class=&quot;col-md-6&quot;&gt;
                       &lt;table width=&quot;100%&quot; border=&quot;0&quot;&gt;
                          &lt;tr&gt;
                              &lt;td&gt;Basic&lt;/td&gt;&lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;cb&quot; id=&quot;cb&quot;  autocomplete=&quot;off&quot;/&gt;&lt;/td&gt;
                          &lt;/tr&gt;
  
      &lt;tr&gt;&lt;td&gt;after one increment&lt;/td&gt;&lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;aftinc&quot; id=&quot;aftinc&quot;  autocomplete=&quot;off&quot;/&gt;&lt;/td&gt;&lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;table class=&quot;table table-responsive&quot;&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;h6&gt;Current Level&lt;/h6&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;h6&gt;Promotion Level&lt;/h6&gt;&lt;/td&gt;
              &lt;/tr&gt;
              
              &lt;tr&gt;
                  &lt;td&gt;
                  &lt;table id=&quot;le10&quot; class=&quot;table table-responsive table-striped&quot;&gt;
          
                          &lt;tr&gt;&lt;td&gt;56100&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;57800&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;59500&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;61300&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;63100&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;65000&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;67000&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;69000&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;71100&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;73200&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;75400&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;77700&lt;/td&gt;&lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
                  
                  
                  &lt;td&gt;
                      &lt;table  id=&quot;le11&quot; class=&quot;table table-responsive table-striped&quot;&gt;
                          
                          &lt;tr&gt;&lt;td&gt;67700&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;69700&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;71800&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;74000&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;76200&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;78500&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;80900&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;83300&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;85800&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;88400&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;91100&lt;/td&gt;&lt;/tr&gt;
                          &lt;tr&gt;&lt;td&gt;93800&lt;/td&gt;&lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              
              
                  &lt;td&gt;
                      Next Basic&lt;/td&gt;&lt;td&gt;&lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;nb&quot; id=&quot;nb&quot;  autocomplete=&quot;off&quot;/&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;!--match and highlight the Current basic textbox value with the level table--&gt;
      
         &lt;script&gt;
      $(function () {
        $('#cb').on('change keyup', function() {
          var search = $(this).val();
          $('table#le10 tr td').filter(function() {
              if($(this).text() == search){
                $(this).parent('tr').addClass('highlight');
               $(this).parent('tr').closest('tr').next().addClass('highlight2');
                  var aftinc = $(this).parent('tr').closest('tr').next().text();
                $('#aftinc').val(aftinc);
              }else{
                $(this).parent('tr').removeClass('highlight');
                $(this).parent('tr').closest('tr').next().removeClass('highlight2');
              }
          })
        });
      });
      
      
      //for extending the search to the 2nd table
     $(function () {
    $('#aftinc').on('input', function() {
      var search2 = $(this).val();
      $('table#le11b tr td').filter(function() {
          if($(this).text() == search2){
             $(this).closest('tr').next().addClass('highlight2');
          }else{
            $(this).closest('tr').next().removeClass('highlight2');
          }
      })
    });
  });
  
      &lt;/script&gt;
  
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>