Adding new row to table is not working using jquery

I am trying to add/remove new table row <tr> which holds some form elements, on click using jquery. I have tried to develop the jquery code using some tutorials but my code is not working. I cannot add or remove any row.

Though I have provided the code below if you still want to see the code on jsfiddle, please check this link : demo

Could you please tell me where I am doing wrong? Thanks :)

HTML

 <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
  <table class="dynatable">
        <thead>
            <tr>
                <th>Type</th>
                <th>Account Name</th>
                <th>Debit</th>
                <th>Credit</th>

            </tr>
        </thead>

     <tbody id="p_scents">

         <tr>
        <td><select name="type" id="type">
              <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
              </select> 
             </td>

             <td><select name="accounts" id="accounts">
    <option value="">SELECT</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
       </select> </td>

      <td><input type="text" name="debit_amount" id="debit_amount" /> </td>
      <td><input type="text" name="credit_amount" id="credit_amount"/></td>

      </tr>
    </tbody>
  </table>

Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script>
  $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').live('click', function() {
        ('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);

            i++;
            return false;
     });

      //Remove button
         $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('<tr>').remove();
                    i--;
            }
            return false;
          });
       });
   </script>​​

Here's a working example, including remove row functionality: DEMO.

And this is the resulting JS:

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});​

First, your HTML had a couple of syntactical problems (solved in the fiddle). You where using the .append(), function wrong, and the selector in your last function ('$(this).parents('').remove();') needed to be just 'tr'.

And nothing much :P