Multi editable Datatables and Forms.

Hi there,

I have following html5 page, copied from the Codeproject site and edited it a little. This Page contains 2 Datatables and Editable functions. How can I make this work with two forms? Because I always get the last form that's on the page.

@{
    ViewBag.Title = "Customization";
    Layout = "~/Views/Invoice/JQueryDataTableEditableLayout.cshtml";
}

@section head{

    <script src="@Url.Content("~/Content/jAlert/jquery.alerts.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/jAlert/jquery.alerts.css")" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $('#myDataTable').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": false,
                "bInfo": false,
                "bAutoWidth": false
            }).makeEditable({
                sUpdateURL: "/Invoice/UpdateData",
                sAddURL: "/Invoice/AddData",
                sDeleteURL: "/Invoice/DeleteData",

                sAddNewRowFormId: "formAddNewInvoice",
                sAddNewRowButtonId: "btnAddNewInvoice",
                sAddNewRowOkButtonId: "btnAddNewInvoiceOk",
                sAddNewRowCancelButtonId: "btnAddNewInvoiceCancel",
                sDeleteRowButtonId: "btnDeleteInvoice",


                fnShowError: function (message, action) {
                    switch (action) {
                        case "update":
                            jAlert(message, "Update failed");
                            break;
                        case "delete":
                            jAlert(message, "Delete failed");
                            break;
                        case "add":
                            $("#lblAddError").html(message);
                            $("#lblAddError").show();
                            break;
                    }
                },
                fnStartProcessingMode: function () {
                    $("#processing_message").dialog();
                },
                fnEndProcessingMode: function () {
                    $("#processing_message").dialog("close");
                }
            });
        });

    </script>
    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $('#InvoiceRecords').dataTable({
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bSort": false,
                "bInfo": false,
                "bAutoWidth": false,
                "aoColumns": [
			/* Index */   null,
			/* Description */  null,
			/* Country */ null,
			/* Removable */  { "bVisible": false }
                ]
            }).makeEditable({
                sUpdateURL: "/Invoice/UpdateDataR",
                sAddURL: "/Invoice/AddDataR",
                sDeleteURL: "/Invoice/DeleteDataR",

                sAddNewRowFormId: "formAddNewInvoiceR",
                sAddNewRowButtonId: "btnAddNewInvoiceR",
                sAddNewRowOkButtonId: "btnAddNewInvoiceOkR",
                sAddNewRowCancelButtonId: "btnAddNewInvoiceCancelR",
                sDeleteRowButtonId: "btnDeleteInvoiceR",


                fnShowError: function (message, action) {
                    switch (action) {
                        case "update":
                            jAlert(message, "Update failed");
                            break;
                        case "delete":
                            jAlert(message, "Delete failed");
                            break;
                        case "add":
                            $("#lblAddErrors").html(message);
                            $("#lblAddErrors").show();
                            break;
                    }
                },
                fnStartProcessingMode: function () {
                    $("#processing_message").dialog();
                },
                fnEndProcessingMode: function () {
                    $("#processing_message").dialog("close");
                }
            });
        });

    </script>
    <style type="text/css">
        .dataTables_filter
        {
            display: none;
        }
    </style>
}


<div id="demo" style="width: 600px;">
    <div id="records" style="float: left; width: 300px;">
        <h2>Invoice records</h2>
        <table id="InvoiceRecords" class="display">
            <thead>
                <tr>
                    <th>V. Nr.</th>
                    <th>Omschrijving</th>
                    <th>Land</th>
                    <th>rem</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Records)
                {
                    <tr>
                        <td>@item.Index</td>
                        <td>@item.Description</td>
                        <td>@item.Country</td>
                        <td>@item.Removable</td>
                    </tr>
                }
            </tbody>
        </table>


        <img id="btnAddNewInvoiceR" src="../../Content/images/plus_small.png" />
        <img id="btnDeleteInvoiceR" src="../../Content/images/min_small.png" />
    </div>

    <div id="invoices" style="float: right; width: 200px;">
        <h2>Invoices</h2>

        <table id="myDataTable" class="display">
            <thead>
                <tr>
                    <th>Invoice number</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Invoices)
                {
                    <tr id="@item.ID">
                        <td>@item.Number</td>
                    </tr>
                }
            </tbody>
        </table>


        <img id="btnAddNewInvoice" src="../../Content/images/plus_small.png" />
        <img id="btnDeleteInvoice" src="../../Content/images/min_small.png" />
    </div>

</div>

<div id="processing_message" style="display: none" title="Processing">Please wait while your request is being processed...</div>


<form id="formAddNewInvoice" action="#" title="Add new Invoice" style="font-size: small;">
    <button id="btnAddNewInvoiceOk" value="Ok">Add Invoice</button>
    <button id="btnAddNewInvoiceCancel" value="cancel">Cancel</button>
    <label id="lblAddError" class="error"></label>
    <br />
    <label for="name">Number</label><input type="text" name="number" id="number" class="required" rel="0" />
    <br />
</form>

<form id="formAddNewInvoiceR" action="#" title="Add new Record" style="font-size: small;">
    
    <label id="lblAddErrors" class="error"></label>
    <br />
    <label for="description">Omschrijving</label><input type="text" name="description" id="description" class="required" rel="0" />
    <label for="country">Country</label>
        <select name="country" id="country">
            <option value="Nederland">Nederland</option>
            <option value="Belgie">Belgie</option>
            <option value="Duitsland">Duitsland</option>
        </select>
    <br />
    <button id="btnAddNewInvoiceOkR" value="Ok">Add Invoice</button> <&nbsp/>
    <button id="btnAddNewInvoiceCancelR" value="cancel">Cancel</button>
    <br />
</form>