How to add extra row on a table by clicking

I am trying to create an invoice system and I need to add a function to add extra rows.

What I have looks like this:

The code is here (part of the code):

        <table>
            <tr>
                <th>#</th>
                <th>Type</th>
                <th>Location</th>
                <th>Item</th>
                <th>Cost</th>
                <th>Days</th>
                <th>Price</th>
            </tr>
            <tr class="item-row">
                <td>1</td>
                <td>Type</td>
                <td>Location</td>
                <td>Item</td>
                <td>100</td>
                <td>2</td>
                <td>200</td>
            </tr>
            <tr id="hidden-row">    
                <td colspan=7>
                    <a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
                </td>
            </tr>

The script I have, that is not working (FYI this is the full script):

$(document).ready(function() {   
  $("#addrow").click(function(){
    $(".item-row:last").after('
    <tr class="item-row">
        <td>#</td>
        <td>New Item</td>
        <td>New</td>
        <td>New</td>
        <td>New</td>
        <td>New</td>
        <td>New</td>
    </tr>');
    bind();
  });
});

What I want to do but have no idea how to do it is: click Add a row, and have an extra row to add more products. I did some research and came across some example and I took the code for the script from there but I do not know if I left part of the script out. I am using, html, php and js any help will be greatly appreciated! thank you in advanced.