JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<h2 align="center">Add Services And Products To Your Proposal</h2>
<div id="whole">
	<div id="tablebuttons">
		<input type="button" value="Add Services"id="services"  > 
		<input type="button" value="Add Products"id="products" >
	</div>
	<div id="table1">

		<form id="ccards" method="post">
			<table cellspacing="5">
				<tr>
					<th></th>
					<th align="center">Name:</th>
					<th align="center">Description:</th>
					<th align="center">Quantity:</th>
					<th align="center">Amount:</th>
				</tr>
				    <tbody id ="cctable" >
				        <tr class="ccinput">
    				        <td> 1 </td>
    				        <td> <input type="text" name="cc_ser[]" id="name" maxlength="20"/> </td> 
                            <td> <textarea name= "txt[]"></textarea> </td>
    				        <td> <input type="text" name="cc_quant[]" maxlength="7" id="quantity" /> </td> 
    				        <td> <input type="text" name="cc_amount[]" maxlength="15" id="amount"/> </td>
				        </tr>
				    </tbody>
			</table>
		    <div>
   			 <input type="button" class="btnAdd" id="add" value="Add" />
    		<input type="button" class="btnDel" value="Cancel" id="btnDel" />
			<input type="button" name="save" value="Save" id="save" />
		    </div>
		</form>
	</div>
	
	<div id="table2">

		<form id="ccards" method="post">
			<table cellspacing="5">
				<tr>
					<th></th>
					<th align="center">Name:</th>
					<th align="center">Description:</th>
					<th align="center">Quantity:</th>
					<th align="center">Amount:</th>
				</tr>
				    <tbody id ="dbtable" >
				        <tr class="dbinput">
    				        <td> 1 </td>
    				        <td> <input type="text" name="db_pro[]" id="name" maxlength="20"/> </td> 
    				        <td> <textarea name= "txt[]"></textarea> </td>
    				        <td> <input type="text" name="db_quant[]" maxlength="7" id="quantity" /> </td> 
    				        <td> <input type="text"...

JavaScript

$(document).ready(function() {
        $("#table1").hide();
        $("#table2").hide();
        $("#services").click(function(){
            $("#table1").slideToggle();
            $("#table2").hide();
            $("#cctable tr").attr('class', 'dinput');
            $("#dbtable tr").attr('class', 'dbinput');
            $('.btnDel').attr('disabled','disabled');
        });

        $("#products").click(function(){
            $("#table2").slideToggle();
            $("#table1").hide();
            $("#dbtable tr").attr('class', 'dinput');
            $("#cctable tr").attr('class', 'ccinput');
            $('.btnDel').attr('disabled','disabled');
        });
        $('.btnAdd').click(function() {
		
            var num     = $('.dinput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('.dinput:last').clone();

            // insert the new element after the last "duplicatable" input field
            $('.dinput:last').after(newElem);
            $(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );

            // enable the "remove" button
            $('.btnDel').attr('disabled','');


            // business rule: you can only add 10 names
              if (newNum == 10)
                $('.btnAdd').attr('disabled','disabled');
        });

        $('.btnDel').click(function() {
            var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
            $('.dinput:last').remove();     // remove the last element

            // enable the "add" button
            $('.btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('.btnDel').attr('disabled','disabled');
        });

 ...