Dynamically add and delete tables and dynamically adding and deleting rows in those tables created using JQuery

Hello,

The project I'm working on was originally designed to dynamically add rows with JQuery. The problem is, the user wants to add subcategories to each row.  I decided to use tables instead of the rows for the category and then tried to dynamically add rows to those tables created but I'm stuck. The default table works fine. I can add other tables as well but when adding a new table, it's copying over the new subcategories(rows) previously created and it's unable to add new rows on the new and previous table (the ID of the button changes, not sure how to make the code work for the new ID created).


p.s: I have the feeling this code is not going to work since I'm using clone. Any other suggestions are appreciated.

Thanks!

$('#btnAddD').click(function() {                 
  var numD     = $('.clonedInputD').length; 
 var newNumD  = new Number(numD + 1);      
 var newElemD = $('#inputD' + numD).clone().attr('id', 'inputD' + newNumD);                  

newElemD.find(':input').each(function() {							 
      var name = $(this).attr('name').replace(/\d+$/, '');
      $(this).attr({id: name + newNumD, name: name + newNumD});
	 
	  if (($(this).attr('name')).indexOf("prodCat") != -1){ 
	  $(this).val('');	
	  }
	  if (($(this).attr('name')).indexOf("tier") != -1){ 
	  $(this).val('Add Tier');	
	  }
	  else{
	  $(this).val('');	  
	  }
	 
});                  

$('#inputD' + numD).after(newElemD);                   
$('#btnDelD').attr('disabled','');                  
$('#nCountD').val(newNumD);
$('#qweqweqw').text(newNumD);						
 if (newNumD == 5)                     

$('#btnAddD').attr('disabled','disabled');            
 }); 
  
   $('#btnDelD').click(function() {                 
							   
	var numD = $('.clonedInputD').length; 

$('#inputD' + numD).remove();     // remove the last element                   
   $('#nCountD').val(numD - 1);			
$('#btnAddD').attr('disabled','');                  
if (numD-1 == 1)                     
$('#btnDelD').attr('disabled','disabled');             
 });               
   $('#btnDelD').attr('disabled','disabled');     
   
// Using it for the tiers

$('#tier').click(function() {                 
  var numT     = $('.clonedInputT').length; 
										
 var newnumT  = new Number(numT + 1);      
											
  var newElemT = $('#inputT' + numT).clone().attr('id', 'inputT' + newnumT);                  
																																	 $('#inputT' + numT).after(newElemT);                   
										
$('#btnDelD').attr('disabled','');                  
									
$('#nCountD').val(newnumT);

   $('#qweqweqw').text(newnumT);																			
 if (newnumT == 5)                     
										
$('#btnAddD').attr('disabled','disabled');            

 }); 
  
   
  
<table class="clonedInputD" id="inputD1" >
    <tr>
    <td>&nbsp;;<cfinput name="category1" type="text" style="width:35px" maxlength="3" /><
      <br />
    &nbsp;&nbsp;<cfinput type="button" name="tier" id="tier" value="Add Tier" class="btn" style="font-size:8px"/>  
      </td>
    <td>&nbsp;<cfinput name="qty1" type="text" style="width:35px" maxlength="3" /><br />
    &nbsp;
    </td>
    <td>&nbsp;<cfinput type="text" name="listP1" style="width:60px" maxlength="10"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="endUser1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="instPerItem1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="extListP1" style="width:60px" maxlength="5"><br />
    &nbsp;</td>
    <td>&nbsp;<cfinput type="text" name="custTotal1" style="width:60px" maxlength="10"><br />
    &nbsp;
    </td>
  </tr>
  <tr class="clonedInputT" id="inputT1" >
    <td>&nbsp;
    TEST TIER
    </td>
  </tr>
  </table>
  </td>
  </tr>

Open in new window

HumanScaleDevAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Can you create a jsfiddle.net ? It is hard to test when you do not post rendered HTML
0
Gurpreet Singh RandhawaCEOCommented:
you can use datatables for your CRUD operations
0
HumanScaleDevAuthor Commented:
@ myselfrandhawa. I've never used them and I can't find any good examples for what I'm looking for. Is there anything out there that you could point me to?
I appreciate it!
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Gurpreet Singh RandhawaCEOCommented:
hi, Here is the following link where you can do what you need:

http://datatables.net/blog/2012-05-31

You try to do it and create a jsfiddle, we will help in making it work of what you need.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
HumanScaleDevAuthor Commented:
Thank you! currently working on another project, will get back to this at the end of this week/beginning of next one.

Thanks!
0
HumanScaleDevAuthor Commented:
Thank you! We ended up using another approach but the link is very helpful for future projects. Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.