title: How to target the second column of table with the class of selected using jQuery
body: <p>I have problem in my codes,I want to get the value of 2 column table data with the class of (SELECTED).</p>
  
  <p><strong>First need to click the table row of the first table to get the value and to add the class of selected. my function look like this</strong>.</p>
  
  <pre><code>$('#edit_chainingBuild').on('click','tr.clickable-row  td:not(:first-child)',function(e){
             $(this).closest('tr.clickable-row').find('td:not(:first-child)').addClass('selected');
        });
  </code></pre>
  
  <p>Now the first table and the clicked table row has a class of selected, via clicking in my second table I want to determine what is the value of table data has a class of selected.</p>
  
  <p><strong>Note: I want to get the second column of table with the class of selected of table data.</strong></p>
  
  <p>Now here in my second function I want to alert the value of class of selected</p>
  
  <pre><code>$("table#edit_table_chaining_condiments tr").click(function(e){
  
            var x = $('table#edit_chainingBuild tbody tr.clickable-row td.clickable-row-condiments.selected td:nth-child(2)').text();
  
  
            alert(x);
  
  
        });
  </code></pre>
  
  <p>My Html:</p>
  
  <pre><code>&lt;div class="modal fade" id="EditchainingBuilderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static"&gt;
    &lt;div class="modal-dialog modal-lg role="document" style="float:right; height:700px; width:490px; "&gt;
      &lt;div class="modal-content"&gt;
            &lt;div class="modal-header" style="background: linear-gradient(-30deg, #00e4d0, #5983e8); color:white;"&gt;
              &lt;h5 class="modal-title edit_noun_build_item" id="exampleModalLongTitle" style="color:white;"&gt;&lt;/h5&gt;
              &lt;button type="button" class="close" id="closeBuildChainUpdate" data-dismiss="modal" aria-label="Close" style=""&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
            &lt;/div&gt;
  
            &lt;div class="modal-body"&gt;
  
              &lt;div class="container"&gt;
                  &lt;div class="header" style="text-align: center;"&gt;
                      &lt;br&gt;
                      &lt;h3&gt;Build Your Chain Button&lt;/h3&gt;    
                      &lt;label&gt;This button will be served as customers menu.&lt;/label&gt;&lt;br&gt;
                      &lt;i class="fab fa-creative-commons-remix" style="font-size:70px;"&gt;&lt;/i&gt;
                      &lt;br&gt;&lt;br&gt;
  
                      &lt;input type="hidden" value="" class="edit_hidden_noun_id" name=""&gt;
                      &lt;table class="table table-hover" id="edit_chainingBuild"&gt;
                          &lt;thead&gt;
                              &lt;tr style="font-size: 15px;"&gt;
                                  &lt;th scope="col"&gt;Qty&lt;/th&gt;
                                  &lt;th scope="col"&gt;Condiments&lt;/th&gt;
                                  &lt;th scope="col"&gt;Price&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody style="font-size:14px;"&gt;                 
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="edit_build_success_insert btn btn-primary"&gt;Build Done&lt;/button&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have output that the table row has highlighted because of added class of selected.</p>
  
  <p><a href="https://i.stack.imgur.com/WFRkz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WFRkz.png" alt="Output"></a></p>