JQuery and Nested Tables - Targeting the right target to add/remove or show/hide -

so usual, i'm having hard time finding right instruction i'm attempting accomplish , it's getting little 'twisty' know far.

what i'm attempting accomplish: i'm building client system a) hold client's general data , b) store whatever services using within general client container. system meant bit simple , uses nested tables, i'm finding isn't simple i'd hoped lol.

so far i'm building template hold data. idea javascript/jquery functionality out of way, pull data database using functionality. here's breakdown:

• page pull searched data or show clients.
• each client's general data displayed, services hidden until manually shown (this keep data showing user making harder find actual client while looking them).
• the services shown after hitting form of 'show' button.
• an option add more services within client needed.
• an option add additional clients needed.

what have far , don't: i've gotten structure far. issue can't seem correctly target right cells insert additional data when hitting 'new service'. can see main problem i'm not uniquely identifying need target. thought on attempt .parent() relationships using jquery, after lot of odd trial attempts, kept failing.

although current code doesn't show .parent usage, can see how it's not manipulating tables correctly when adding services. not able target added client data. 'new service' adds multiple instances in each client, again me hitting 'general' target instead of specific one.

i did setup working model on jsfiddle. if hit 'add' few times add client, can see happens when try 'show' or 'new service' of them other first listing. here's link: http://jsfiddle.net/silenced/thmvb/

my main question: how can use these manipulating elements target specific client instead of everything? need change how table structure in order little more ease? should involve more div's instead of table? maybe need more table's (which trying avoid overusing them)? loops number each section make sense? seems if went route, i'd have still find number client too.

here's code (also @ above jsfiddle link):

css:

body {     margin: 0; padding: 0;     text-align: right; font-family: arial, sans-serif; }  #content { text-align: left; }  h1 { padding: 0 3%; color: #ccc; font-size: 1.5em; font-family: courier, serif; }  table tr th {     text-align: left; font-size: .6em;     background-color: #ccc; } table { font-size: 1em;  border-collapse: collapse;} table td { vertical-align: top; padding: 0 2px; }  #prim { margin: 0 auto; width: 1200px;}  #nclient {     margin: 0 auto; width: 30px;     background-color: #ccc;     font-size: .7em; text-align: center;     cursor: default; }  #nserv {     margin: 1px 1px 1px 0px; float: left; width: 70px;     background-color: #ccc;     font-size: .8em; text-align: center;     cursor: default; } #tserv {     margin: 1px 1px 1px 0px; float: left; width: 70px;     background-color: #ccc;     font-size: .8em; text-align: center;     cursor: default; }  /* fixes issue mozilla border-bottom , border-right still shown on last row */ .hbrdr {     border-bottom-style: hidden;     border-right-style: hidden; } #sec {     margin: -1px -3px; width: 100.55%; // ensures inner data table fits correctly } #sec td { font-size: .9em; }  .details { display: none; } .cent { text-align: center; } 

script(jquery):

$(document).ready(function() {      // when 'add' clicked, create new client set template service            $('#nclient').click(function() {         $('#addrow').before('<tr>' +                   '<td rowspan="3">#</td>' +                   '<td>test name</td>' +                   '<td>me</td>' +                   '<td>test@test.yup</td>' +                   '<td>pending</td>' +                 '</tr>' +                 '<tr>' +                   '<td colspan="5" class="details">' +                     '<table id="sec" border="1px">' +                         '<thead>' +                           '<tr>' +                             '<th style="width: 250px;">descriptor</th>' +                             '<th style="width: 100px;">id</th>' +                             '<th style="width: 25px;">ref</th>' +                             '<th style="width: 70px; text-align: center;">access data</th>' +                             '<th style="width: 70px; text-align: center;">active</th>' +                             '<th>start date</th>' +                             '<th style="width: 350px;">comment</th>' +                           '</tr>' +                         '</thead>' +                         '<tbody>' +                           '<tr>' +                             '<td>service descriptor</td>' +                             '<td>12345</td>' +                             '<td>101</td>' +                             '<td class="ind"><input type="checkbox"></td>' +                             '<td class="ind"><input type="checkbox"></td>' +                             '<td>01/01/2014</td>' +                             '<td>comment goes here.</td>' +                           '</tr>' +                         '</tbody>' +                     '</table>' +                   '</td>' +                 '</tr>' +                 '<tr style="font-size: 12px;">' +                   '<td colspan="2"><div id="tserv">show</div><div id="nserv">new service</div></td>' +                   '<td colspan="3">notes</td>' +                 '</tr>');     });      // when 'new service' clicked, add additional service data row current client     $('#nserv').click(function() {         $('#sec tbody tr:last-child').after('<tr>' +                 '<td>service descriptor</td>' +                 '<td>12345</td>' +                 '<td>101</td>' +                 '<td class="cent"><input type="checkbox"></td>' +                 '<td class="cent"><input type="checkbox"></td>' +                 '<td>01/01/2014</td>' +                 '<td>comment goes here.</td>' +               '</tr>');     });      /* show/hide additional data */     $('#tserv').click(function() {         $(this).text($(this).text() == 'hide' ? 'show' : 'hide');         $('.details').toggle();     }); }); 

html:

<div id="content">  <h1>new client project</h1>  <table border="1px" id="prim"> <thead>     <tr>       <th style="width: 5px;">no.</th>       <th>name</th>       <th>state</th>       <th>e-mail</th>       <th>status</th>     </tr> </thead> <tbody>     <!-- begin client data -->     <tr>       <td rowspan="3">#</td>       <td>test name</td>       <td>me</td>       <td>test@test.yup</td>       <td>pending</td>     </tr>     <tr>         <td colspan="5" class="details">           <table id="sec" border="1px">             <thead>               <tr>                 <th style="width: 250px;">descriptor</th>                 <th style="width: 100px;">id</th>                 <th style="width: 25px;">ref</th>                 <th style="width: 70px; text-align: center;">access data</th>                 <th style="width: 70px; text-align: center;">active</th>                 <th style="width: 100px;">start date</th>                 <th style="width: 350px;">comment</th>               </tr>             </thead>             <tbody>             <!-- begin client sub-data -->               <tr>                 <td>service descriptor</td>                 <td>12345</td>                 <td>101</td>                 <td class="cent"><input type="checkbox"></td>                 <td class="cent"><input type="checkbox"></td>                 <td>01/01/2014</td>                 <td>comment goes here.</td>               </tr>             <!-- end client sub-data -->             </tbody>         </table>                     </td>     </tr>     <tr style="font-size: 12px;">         <td colspan="2"><div id="tserv">show</div><div id="nserv">new service</div></td>       <td colspan="3">notes</td>     </tr>     <!-- end client data -->      <tr id="addrow">       <td><div id="nclient">add</div></td>       <td colspan="5" class="hbrdr"></td>     </tr>        </tbody> 

i appreciate give me me in right direction.

ok, think there's more 1 problem here, let's start beginning

• multiple id: can't assign same id multiple elements, have multiple #nserv , #tserv

• onclick event on dynamically added element: take @ this: http://api.jquery.com/on/ , try

  $('table').on('click', '#tserv', function() {     $(this).text($(this).text() == 'hide' ? 'show' : 'hide');     $('.details').toggle(); }); 

i've made couple of change http://jsfiddle.net/jmbvk/