JSFiddle - React, Tailwind, and code Playground

by Sethu raman

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">Action:</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="button" class="btnAdd" id="add" value="Add" onclick="addrow()" />
    		<input type="button" class="btnDel" value="Cancel" id="btnDel" onclick="removerow(this)" />
			<input type="button" name="save" value="Save" id="save" />                                   
                            </td>
				        </tr>
				    </tbody>
			</table>
		</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">Action:</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="button" class="btnAdd" onclick="addrow();" id="padd" value="Add" />
    		<input type="button" class="btnDel" value="Cancel"...

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');
            $('#pbtnDel').attr('disabled','disabled');
        });
       
    });

function addrow()
{
            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>" );
if (newNum > 1)
            // enable the "remove" button
            $(newElem).find('.btnDel').attr('disabled','');


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

function removerow(sender)
{
            $(sender).parent().parent().remove();
}