Row animation and numbering
<p>Can someone help me:</p>

<ol>
<li>Add fade animation when adding and deleting rows</li>
<li>Why numbers in front of rows are not showing correctly when new row added?</li>
</ol>

<p>Html:</p>

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

<p>Js:</p>

<pre><code>    $(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();

            })

        };
    });
</code></pre>

<p><a href="http://jsfiddle.net/VNBzC/4/" rel="nofollow">Fiddle Link</a></p>
