JS web function not working on client side - PHP-JS-HTML

Hi,
I have this code:

HTML Code:

---

...
        <tr id="hidden-row">       
                <td colspan=7>
                        <a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
                        <button onclick="addarow()">Add a row</button>
                </td>
        </tr>
</table>

---

With this script:

HTML Code:

---

function addarow() {
        var table = document.getElementById("table-items");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
}
$(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();
  });
  bind();
});

---

The button and link, do the same thing.
Here is the problem, when I test it in localhost, the button and link works fine but when I test it from a different PC, the link is not working and is the one I need to work. Any idea what can be the root cause? do I need extra permissions in my host or add an extra line of code? I am not very savvy with JS. Thank you in advance.
Try different browsers and nothing, the link Add a row does nothing.

PHP, javascript, html, js

Not sure why it works differently but you shouldn't be using the "click" method of jQuery, you should be using "on" and set it to click. You're also looking for "item-row" by class - the dot beforehand - so you can improve the performance by filtering the elements to just TR ones that have that class "item-row". I also prefer $(function(){ .... }); rather than $(document).ready
Something like this for your jQuery (I've done away with your addarow function):

Code:

---

        <script type="text/javascript">
        $(function() {
                $("#addrow").on('click',function(){
                        $("tr.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>');
                });
        });
        </script>

---

And then because you're attaching the on click event to the ID "addrow" you can just assign that ID to the button and ditch the A element.

HTML Code:

---

<table>
    <tr id="hidden-row">       
                <td colspan=7>
                        <button id="addrow">Add a row</button>
                </td>
        </tr>
        <tr class="item-row">
                <td>#</td>
                <td>Old Item</td>
                <td>Old</td>
                <td>Old</td>
                <td>Old</td>
                <td>Old</td>
                <td>Old</td>
        </tr>
</table>

---