Can someone help me:

1. Add fade animation when adding and deleting rows
2. Why numbers in front of rows are not showing correctly when new row added?

Html:

```
<table id="table">
  <thead>
    <tr>
        <th width="8" scope="col">&nbsp;</th>
        <th width="131" scope="col">Roba/Usluga</th>
        <th width="144" scope="col">Jmj</th>
        <th width="144" scope="col">Količina</th>
        <th width="144" scope="col">Jed. cijena</th>
        <th width="144" scope="col">Rabat</th>
        <th width="81" scope="col">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td></td>
        <td>
            <select name="sif_roba1" id="sif_roba1">
                <option value="">Please select</option>
                <option value="1">David Hasselhoff</option>
                <option value="2">Michael Jackson</option>
                <option value="3">Tina Turner</option>
            </select>
        </td>
        <td>
            <select name="idjmj1" id="idjmj1">
                <option value="">Please select</option>
                <option value="1">David Hasselhoff</option>
                <option value="2">Michael Jackson</option>
                <option value="3">Tina Turner</option>
            </select>
        </td>
        <td>
            <input name="cijena1" id="cijena1">
        </td>
        <td>
            <input name="track1" id="track1">
        </td>
        <td>
            <input name="rabat1" id="rabat1">
        </td>
        <td>
            <button class="remove_button">Remove</button>
        </td>
    </tr>
  </tbody>
</table>
<button type="button" class="add" onClick="clickMe();">Add</button>

```

Js:

```
    $(document).ready(function ($) {
        // trigger event when button is clicked
        $("button.add").click(function () {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;

        });

        // function to add a new row to a table by cloning the last row and 
        // incrementing the name and id values by 1 to make them unique
        function addTableRow(table) {

            rowCount = 0;
            $("#table tr td:first-child").each(function () {
                rowCount++;
                $(this).text(rowCount);
            });

            // clone the last row in the table
            var $tr = $(table).find("tbody tr:last").clone();

            // get the name attribute for the input and select fields
            $tr.find("input,select").attr("name", function () {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                // create a unique name for the new field by incrementing
                // the number for the previous field by 1
                return parts[1] + ++parts[2];

                // repeat for id attributes
            }).attr("id", function () {
                var parts = this.id.match(/(\D+)(\d+)$/);
                return parts[1] + ++parts[2];
            });
            // append the new row to the table
            $(table).find("tbody tr:last").after($tr);

            // remove rows
            $(".remove_button").live("click", function () {
                $(this).parents("tr").remove();

            })

        };
    });

```

[Fiddle Link](http://jsfiddle.net/VNBzC/4/)