jQuery append issue with WP but without it's fine

Hi,

I’m trying to add a simple add/remove function in my Plugin settings page and it’s killing me. I checked without WP and my code is working perfectly fine.

I have a table with (dynamic) rows. I can add as many rows as I want or remove them. My issue is when I’m trying to save the data in the database because the new rows added with jQuery are empty.

On my screen I can add/remove the rows perfectly but during the send process, those new rows don’t exist. When I remove a row from the database and save the table, everything is fine. The only problem is to save the new rows.

My JS code:

var admin;
(function ($) {
    admin = {
        init: function () {
			$(".remove_position").live('click', function() {
				$(this).closest('tr').remove();
			});

			$("#add_position").live("click", function() {
				if ($('#positions-table tbody tr:last').length > 0)
				    var getNumber = parseInt($('#positions-table tbody tr:last').attr('id').replace('position-', ''), 10);
				else
					var getNumber = 0;

				var addNumber = getNumber + 1;

				$('#positions-table > tbody:first').append('<tr id="position-' + addNumber + '"><td><input type="text" name="positions[' + addNumber + '][id]" value="1" size="4" /></td><td><input type="text" name="positions[' + addNumber + '][name]" value="" /></td><td><input type="text" name="positions[' + addNumber + '][order]" value="0" size="4" /></td><td><select name="positions[' + addNumber + '][show]"><option value="no">No</option><option value="yes" selected="selected">Yes</option></select></td><td><input type="button" name="remove_position" value="Remove" class="button remove_position" /></td></tr>');
			});
        }
    };

    $(document).ready(function() {
        admin.init();
    })
})(jQuery);

My HTML code:

<table id="positions-table" class="widefat">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Order</th>
            <th>Show</th>
            <th><a href="#add_position" id="add_position">New Position</a></th>
        </tr>
    </thead>
    <tbody>
        <tr id="position-17">
            <td><input type="text" name="positions[17][id]" value="1" size="4" /></td>
            <td><input type="text" name="positions[17][name]" value="Gardien de But" /></td>
            <td><input type="text" name="positions[17][order]" value="0" size="4" /></td>
            <td>
                <select name="positions[17][show]">
                    <option value="no">No</option>
                    <option value="yes" selected="selected">Yes</option>
                </select>
            </td>
            <td><input type="button" name="remove_position" value="Remove" class="button remove_position" /></td>
        </tr>
    </tbody>
</table>

I’m 100% sure that the problem is from WP or my code doesn’t fit WP settings but without WP, everything perfect.

Thanks for your help. I can easily imagine that the issue is on my JS code OR WP is not accepting the append() values…