title: How to select table id within a div or two?
body: <p>I'm trying to select the following table id - myTable - which is nested within a few divs.</p>
  
  <p>Here is a screenshot of the element panel from Chrome:</p>
  
  <p><img src="https://farm8.staticflickr.com/7265/7498979660_80445d0f83_b.jpg" alt=""></p>
  
  <p>I've tried using the below to no avail:</p>
  
  <pre>
  
      $('#myTable').tablesorter();
      $('table#myTable').tablesorter();
  
  </pre>
  
  <pre><code>    &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;title&gt;Beverly Bonus Dashboard&lt;/title&gt;
          &lt;script type="text/javascript" src="../js/jquery/js/jquery-min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../js/jquery/js/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../js/jquery/tablesorter/jquery.tablesorter.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="../js/central.js"&gt;&lt;/script&gt;
          &lt;link type="text/css" href="../js/jquery/css/tpurple/jquery-ui-1.8.21.custom.css" rel="stylesheet" /&gt;
        &lt;/head&gt;
        &lt;? if ($isDelegate == "true") { ?&gt;
        &lt;body&gt;
          &lt;div id="tabs"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tabs-1"&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-2"&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-3"&gt;Administration&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div id="tabs-1"&gt;
              &lt;p&gt;Tab 1 content&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="tabs-2"&gt;
              &lt;p&gt;Tab 2 content&lt;/p&gt;
            &lt;/div&gt;
            &lt;div id="tabs-3"&gt;
              &lt;button id="button_showUsers" value="&lt;?=$centreID; ?&gt;"&gt;Show Users&lt;/button&gt;
              &lt;button id="button_addUsers" value="&lt;?=$centreID; ?&gt;"&gt;Add Users&lt;/button&gt;
              &lt;button id="button_removeUsers"&gt;Remove Users&lt;/button&gt;       
              &lt;br&gt;
              &lt;div id="users"&gt;&lt;/div&gt;               
            &lt;/div&gt;
          &lt;/div&gt;   
        &lt;/body&gt;
        &lt;? }//end if isDelegate 
        else {
          echo $fullName .", You do not have permission to view this page";
        }
        ?&gt;  
      &lt;/html&gt;
  </code></pre>
  
  <p>file: central.js  </p>
  
  <pre><code>&lt;pre&gt;
      $(document).ready(function(){
        //Tabs
        $('#tabs').tabs({ spinner: 'Retrieving data...' });
        //Buttons
        $("button").button();     
        //Dialog Box 
        $('#dialog').dialog()
        //error messages
        var $error_1 = $('&lt;div&gt;&lt;/div&gt;')
          .html("You Do Not Have Permission To View This Site.")
          .dialog({autoOpen: false, title: 'Error'});  
         $('#myTable.tablesorter').tablesorter();
  
        //site stuff
        $("#button_showUsers").click(function(){
          //get the centre id
          var ID = $(this).val();
          //echo out the delegates based on the centre ID
          $.getJSON("../php/show_delegates.php", {  centreID: ID }, function(data) { 
            $("#users").html("");
            var tbl ="&lt;table id='myTable' class='tablesorter'&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;AGS&lt;/td&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Centre ID&lt;/td&gt;&lt;td&gt;Start Date&lt;/td&gt;&lt;td&gt;End Date&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;";
            $.each(data.delegates, function(key, val) {
              tbl = tbl 
              +"&lt;tr&gt;"
              +"&lt;td&gt;"+val.ags+"&lt;/td&gt;"
              +"&lt;td&gt;"+val.full_name+"&lt;/td&gt;"
              +"&lt;td&gt;"+val.centre_id+"&lt;/td&gt;" 
              +"&lt;td&gt;"+val.start_date+"&lt;/td&gt;"
              +"&lt;td&gt;"+val.end_date+"&lt;/td&gt;"
              +"&lt;/tr&gt;";
            });//end each
            tbl = tbl
            +"&lt;/tbody&gt;&lt;/table&gt;";   
          $("#users").append(tbl);
          })//end getJSON 
        }); //button_showUsers
  
        $("#button_addUsers").click(function(){
          //get the centre id
          var ID = $(this).val();  
          $("#users").html("");
          var tbl ="&lt;table id='myTable' class='tablesorter'&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;AGS&lt;/td&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;Centre ID&lt;/td&gt;&lt;td&gt;Start Date&lt;/td&gt;&lt;td&gt;End Date&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;"
          +"&lt;tr&gt;"
          +"&lt;td&gt;&lt;input type=text id='ags'maxlength='8'&gt;&lt;/input&gt;&lt;/td&gt;"
          +"&lt;td&gt;&lt;/td&gt;"
          +"&lt;td&gt;&lt;/td&gt;"
          +"&lt;td&gt;&lt;/td&gt;"        
          +"&lt;td&gt;&lt;/td&gt;"    
          +"&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;";   
          $("#users").append(tbl);
        }); //button_addUsers
  
        //log user out when window closes
        $(window).unload( function () { 
           $.get("../php/logout.php", function(data) { }); 
           alert("Bye now!");
        });//end unload
  
          //log user out when window closes
        $(window).load( function () { 
          $.get("../php/user_details.php", function(data) { }); 
           //alert("Bye now!");
        });//end unload
  
  
      }); //end (document).ready
  </code></pre>
  
  <p></p>
  
  <p>Any guidance is appreciated.</p>