Add or Delete Feature Details Dynamically using JQuery

Add the following script

function AddFeatureRow() {
        var row = jQuery('#feature tbody>tr:last').clone(true);
        //Retrive text box and rename its id and clear value
        var index = parseInt(jQuery("td span", row).text()) + 1;
        //jQuery("td input:text", row).val("");
        //jQuery("td input:text", row).attr('id', 'fet_' + index);
        jQuery("td [id^=txtDescription]", row).val("");
        jQuery("td [id^=txtDescription]", row).attr('id', 'txtDescription_' + index);
        jQuery("td [id^=txtDescription]", row).attr('name', 'Description_' + index);
        jQuery("td [id^=txtQuantity]", row).val("");
        jQuery("td [id^=txtQuantity]", row).attr('id', 'txtQuantity_' + index);
        jQuery("td [id^=txtQuantity]", row).attr('class', 'Quantity');
        jQuery("td [id^=txtPrice]", row).val("");
        jQuery("td [id^=txtPrice]", row).attr('id', 'txtPrice_' + index);
        jQuery("td [id^=txtPrice]", row).attr('class', 'Price');
        jQuery("td [id^=txtTotal]", row).val("");
        jQuery("td [id^=txtTotal]", row).attr('id', 'txtTotal_' + index);
        jQuery("td textarea", row).val("");
        jQuery("td textarea", row).attr('id', 'txtDescription_' + index);
        jQuery("td span", row).attr('id', 'SrNo_' + index);
        //Retrive href link and rename its attribute
        jQuery("td a", row).attr('id', 'lnk_' + index);
        jQuery(row).attr('featureid', '0');
        //row.insertBefore('#feature tbody>tr:first');
        row.insertAfter('#feature tbody>tr:last');
        jQuery(row).show();
        UpdateFeatureSequence();

    }
    //Remove Feature when user click on delete button
    function FeatureRemoveRow(obj) {
        jConfirm('Are you sure you want to delete ?', 'Delete', function (r) {
            if (r == true) {
                var RowObj = jQuery(obj).parent().parent();
                var Featureid = parseInt(jQuery(RowObj).attr('featureid'));
                var Productid = jQuery("td input:text", RowObj).attr('productid');
                //if Feature is already saved then we need to remove from db for that we are hide this row
                if (Featureid > 0 && Productid > 0) {
                    jQuery(obj).parent().parent().hide();
                }
                else {
                    jQuery(obj).parent().parent().remove();
                }
                UpdateFeatureSequence();
                calculateSum();
            }
          
        });
    }
    function UpdateFeatureSequence() {
        var count = 0;
        jQuery('#feature > tbody  tr:visible').find('.SrNo').each(function (i, e) {
            jQuery(e).text(i + 1);
            count++;
        });
        //jQuery('#feature > tbody  tr:visible').find('td textarea').each(function (i, e) {
        //    jQuery(e).attr('id', 'txtDescription_' + (i + 1));
        //});
        jQuery('#feature > tbody  tr:visible').find('[id^=txtPrice]').each(function (i, e) {
            jQuery(e).attr('id', 'txtPrice_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=txtTotal]').each(function (i, e) {
            jQuery(e).attr('id', 'txtTotal_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=txtQuantity]').each(function (i, e) {
            jQuery(e).attr('id', 'txtQuantity_' + (i + 1));
        });
        jQuery('#feature > tbody  tr:visible').find('[id^=lnk]').each(function (i, e) {
            jQuery(e).attr('id', 'lnkDelete_' + (i + 1));
            jQuery(e).attr('class', 'icon-delete');
            jQuery(e).attr('onclick', 'FeatureRemoveRow(this)');
            jQuery(e).attr('title', 'Delete');
        });
        jQuery('#feature > tbody  tr:last').find('[id^=lnk]').each(function (i, e) {
            jQuery(e).attr('id', 'lnkAdd_' + count);
            jQuery(e).attr('class', 'icon-add');
            jQuery(e).attr('onclick', 'AddFeatureRow()');
            jQuery(e).attr('title', 'Add');
        });
    }

 function SaveInvoice() {
 var InvoiceDetail = new Array();
        var srno = 1;
        $('table > tbody  tr:visible').each(function (i, e) {
            var Description = jQuery(e).find('input[id *= Description]').val();
            var Amount = jQuery(e).find('input[id *= Total]').val();
            var qty = jQuery(e).find('input[id *= Quantity]').val();
            var rate = jQuery(e).find('input[id *= Price]').val();
            var DF_MileStoneId = null;
            if ($("input[type='radio'][name='InvoiceType']:checked").val() != LS) {
                DF_MileStoneId = jQuery(e).find('select[id *= Milestone] option:selected').val()
            }
            if (Description != '' || (Amount != '')) {
                var invoiceDetail = {
                    Description: Description,
                    Amount: Amount,
                    SrNo: srno,
                    Qty: qty,
                    Qty_Unit: $('#optMaxQtyUnit option:selected').val(),
                    Rate: rate,
                    DF_MileStoneId: DF_MileStoneId
                };
                InvoiceDetail.push(invoiceDetail);
            }
            srno = srno + 1;
        });
  //Now pass the InvoiceDetail in AJAX CALL
  }

Now Create a table in which the operation will performed.

<div>              
 <table   class="table table-bordered table-striped table-hover" id="feature" cellpadding="5px" width="20%">
  <thead>
   <tr>
    <th width="7%" class="text-center">
     <label id="lblSr">Sr</label>
     <input type="hidden" value="" id="hdfTotalinvoiceAmount" />
     <input type="hidden" value="" id="hdfTotalProjectAmount" />
    </th>
    <th>
     <label id="Label1">Description</label>
    </th>
    <th>
     <label id="Label1">Milestone</label>
   
    </th>
    <th>
     <label id="Label2">Qty (Units)</label>
     <input type="hidden" value="" id="hdfMaxQty" />
    </th>
    <th>
     <label id="Label3">Rate</label>
    </th>
    <th>
     <label id="Label4">Amount</label>
    </th>
    <th width="5%">&nbsp;
    </th>
   </tr>
  </thead>
  <tbody>
   
   <tr featureid="0" style="vertical-align: top;">
    <td class="text-center">
     <span id="SrNo_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtdescription_1" placeholder="e.g. project go live (10 %)"></textarea>*@
     <input type="text" name="Description" id="txtDescription_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
    <td>
     <select  id="optMilestone" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0"  itemid="" >Select</option>
    
     </select>
    </td>
  
    <td>
     <input type="text" id="txtQuantity_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" id="lnkAdd" class="icon-add" onclick="AddFeatureRow();">
      @*<i class="icon-add"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
   <tr featureid="0" style="display: none; vertical-align: top;">
    <td class="text-center">
     <span id="SrNo0_1" class="SrNo">1</span>
    </td>
    <td>
     @*<textarea rows="2" cols="75" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)"></textarea>*@
     <input type="text"  name="Description" id="txtDescription0_1" placeholder="e.g. Project Go Live (10 %)" style="width: 435px;" />
    </td>
     <td>
     <select  id="sel0_1" style="width: 120px;" class="milestone"   onchange="FillMilestoneAmount($(this).val(),$(this).closest('tr').prevAll('tr').length + 1)">
      <option value="0"  itemid="" >Select</option>
     </select>
    </td>
    <td>
     <input type="text" id="txtQuantity0_1" class="Quantity" style="width: 85px; text-align: right;" placeholder="e.g. 1" />
    </td>
    <td>
     <input type="text" id="txtPrice0_1" onkeyup="CalculateAmount(this);" class="Price" style="width: 85px; text-align: right;" placeholder="e.g. 5000" />
    </td>
    <td>
     <input type="text" id="txtTotal0_1" class="Amount" readonly="true" style="width: 95px; text-align: right;" />
    </td>
    <td width="5%">
     <a href="javascript:void(0)" title="Delete" onclick="FeatureRemoveRow(this)" id="lnkDelete0_1" class="btnDelete">
      @* <i class="icon-remove"></i>*@
     </a>
    </td>
     @{
      index = index + 1; /*Resoution of control duplicate id when we are creating clone of the hidden row*/
   }
   </tr>
  </tbody>
 </table>
</div>