title: Find and style individual elements of HTML through their index in jQuery
body: <p>I am working on a party game (i.e. Tambola/Housie) where I want to automatically identify all the numbers on each ticket that have been called out on the housie board. For example: if 86 has been called out then I want to highlight it (i.e. change its font color or background color) on ticket no. 2 and 3 respectively. The problem is the tickets are getting displayed on the page as an html as it has been copied from another webpage where they are getting created. So, I want a solution which can find these numbers and then color them individually. Any help will be greatly appreciated.</p>
  <p>These tables are the ones which are below &quot;current nos.&quot; in the image. These tables are nothing but tambola tickets. The nos. in these tables are random numbers and get generated with the help of a function. These numbers are not in my control. What I want to achieve is whenever a number is called by the host i.e. in our example they will be 1,3,45,46,48,49,50,86,87,90, I want to check whether these nos. are present in each of the tickets. If yes, then change the font color or background color of those numbers in the respective tickets</p>
  <p>I have inserted 'space' between each number so that I can find them easily. There is space before and after each number in the table. For example: running $(#tickets).text() will give this output -</p>
  <ol>
  <li>1 32 54 72 81... and so on (refer image).</li>
  </ol>
  <p>Some code that I have written to identify the numbers is as follows:</p>
  <pre><code>&lt;body&gt;
  &lt;div id='tickets' style=&quot;font-size: 40px&quot;&gt;
              &lt;/div&gt;
      
  &lt;script&gt;
  
  var array = [];
  var num = [1,3,45,46,48,49,50,86,87,90]     //numbers are actually getting picked from local storage
  var clonetkt = localStorage.getItem(&quot;checktiks&quot;);    //cloning tickets as html from another webpage
  
          
  
  for (i = 1; i &lt;= 90; i++) {
              array.push(i);
   }
  
   for (a = 0; a &lt;= num.length; a++) {
                  for (b = 0; b &lt; 90; b++) {
                      if (array[b] == num[a]) {
                          array[b] = 0;
                      }
                  }
              }
  
  function recreatetable() {
              $('#tickets').html(clonetkt);   //displaying ticket tables as html
              
              var z;
              var n;
              if (array[i - 1] == 0) {
              z= &quot; &quot; + i + &quot; &quot;;    //inserting space to match with elements of the ticket
              n = $('#tickets').text();
              $('#tickets').each(function(){    //trying to match elements of the ticket but works only on the first find. will not find more than one occurrence
              n = $('#tickets').text().indexOf(z);
              if (n &gt;=0){
              console.log($('#tickets').text()[n+1] + $('#tickets').text()[n+2]);     //to check whether the number was actually found in #tickets
              }
              });
          }
          }
          recreatetable(0);
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Please help!</p>
  <p><a href="https://i.stack.imgur.com/CiLUx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CiLUx.png" alt="enter image description here" /></a></p>
  <p>download .js file from here for ticket generation: <a href="https://drive.google.com/file/d/1CxmEO1jBOVft6y68BZyuXBAAby7lXwi2/view?usp=drivesdk" rel="nofollow noreferrer">https://drive.google.com/file/d/1CxmEO1jBOVft6y68BZyuXBAAby7lXwi2/view?usp=drivesdk</a></p>