Enable clicks on Custom HTML Table using JavaScript

[njohnson7]

All, Need some help in the following topic. II have defined a few html tables and I am populating the values of a column from the result token of my base search.  I am trying to write a script which will enable the users to click on the first column values of those html tables and set a couple of other tokens based on the clicked value. 1) A tier_token based on the clicked texts, like Tier1, Tier2 etc. 2) a client_group token id of the table.

If I populate the table values with Static values like 10, 20 etc. . I am able to perform the clicks and set my tokens as I want. But when the values get populated from the result tokens($result.fieldName$) from the base search or let's say any token value get set in the table , the clicks don't work at all.
Could anyone please guide me, what am I doing wrong?

TABLE : 

<row>
    <panel>
      <title>PRD</title>
      <html>
  <table id="PRD" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$client_group$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>10</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_PRD$</td>
  </tr>
  </table>
      </html>
    </panel>
    <panel>
      <html>
  <table id="HPS" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$tier2_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>$tier3_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_HPS$</td>
  </tr>
  </table>
      </html>
    </panel>
and so on....

JS:

var components = [
    "splunkjs/ready!",
    "underscore",
    "splunkjs/mvc/simplexml/ready!",
    "jquery"
];
// Require the components
require(components, function(
    mvc,
    _,
    ignored,
    $
) {
    console.log("Inside Custom Html Table Tokens JS");
      setTimeout(function(){ 
      //click only on first child(1st columns tds)
    $("table td:first-child").on("click", function() {
      console.log("Click Performed");
      var submitted_tokens = mvc.Components.get('submitted');
      var default_tokens = mvc.Components.get('default');
      console.log("Tier Token initial:" + default_tokens.get('tier_token') );
      console.log("ID Token initial:" + default_tokens.get('client_group') );
      var texts = $(this).text(); //get text of td which is clicked
      var ids = $(this).closest("table").attr('id');
      //get closest table where click event has taken place using the attribute `id` of table
      if ( ids == "PRD" || ids == "CMT" || ids == "HPS" || ids == "RES" || ids == "FS") {
        if (ids =="HPS") {
          ids = "H&PS";
        }
        console.log("TEXT " + texts + " ID " + ids);
        submitted_tokens.set('tier_token',texts);
        submitted_tokens.set('client_group',ids);
        default_tokens.set('tier_token',texts);
        default_tokens.set('client_group',ids);
        submitted_tokens.set('form.tier_token',texts);
        submitted_tokens.set('form.client_group',ids);
        default_tokens.set('form.tier_token',texts);
        default_tokens.set('form.client_group',ids);
        console.log("Tier Token newly set:" + default_tokens.get('tier_token') );
        console.log("ID Token newly set:" + default_tokens.get('client_group') );
      }
    })
     },100);
});