Create multiple list item in one go in SharePoint App

Question

In my SharePoint Hosted app... I have a table with 3 rows (also user can add a new dynamic row) with some input fields.

Currently with my code, system is only reading first row of table and creating a list item out of that.

What I am trying to achieve is: 1. System will read each row of table 2. Each row will create separate line item in SharePoint list.

Below is my code. Kindly suggest

$("#Save").click(function SaveButton(event) {
    var oListItem = "";
    for (var i = 1; i <= $("tbody > tr").length; i++) {
        $("tbody > tr:nth-child(" + i + ")").children();
        var claimId = $("input[class=serialNo]").val();
        expenseType = $("select[name=expenseType]").val();
        var amount = $("input[name=amount]").val();
        var expenseDate = $("input[name=expensedate]").val();
        var description = $("textarea[name=description]").val();
        var submissionDate = $('#subDate').val();
        var Attachment = $("#attchmnt").val();
        claimId = expenseType.slice(0, 4) + employeeID.val();
        if (!((amount && expenseDate && description) === "")) {
            var oList = context.get_web().get_lists().getByTitle('ExpensesTransaction');

            var itemCreateInfo = new SP.ListItemCreationInformation();
            oListItem = oList.addItem(itemCreateInfo);

            oListItem.set_item('Title', expenseType);
            oListItem.set_item('ClaimID', claimId);
            oListItem.set_item('EmployeeName', employeeName.val());
            oListItem.set_item('EmployeeID', employeeID.val());
            oListItem.set_item('EmployeeDepartment', department.val());
            oListItem.set_item('ManagerName', manager.val());
            oListItem.set_item('Amount', amount);
            oListItem.set_item('SubmissionDate', submissionDate);
            oListItem.set_item('ExpenseDate', expenseDate);
            oListItem.set_item('ExpenseDescription', description);
            oListItem.set_item('Attachment', Attachment);
            oListItem.set_item('ClaimStatus', "Pending At Manager");
            oListItem.set_item('ItemID', "item");
            oListItem.update();

            context.load(oListItem);
            context.executeQueryAsync(function onQuerySucceeded() {
                alert('Items Added Successfully ')
            }, function onQueryFailed(sender, args) {
                alert('Request failed. ' + args.get_message())
            });

            event.preventDefault();
        }
        else {
            alert("Please Fill all required Fields!!");
        }
    }
});

Below is my HTML

<table class='table-fill' id="claims">
                    <tr>
                        <th>S. No.</th>
                        <th>Expense type</th>
                        <th>Amount<i style="color: red; font-weight: 600">* 
</i></th>
                        <th>Description<i style="color: red; font-weight: 
600">*</i></th>
                        <th>Expense Date<i style="color: red; font-weight: 
600">*</i></th>
                        <th>Attachment</th>
                    </tr>
                    <tbody>
                        <tr id="tr1">
                            <td id="claimID" class="serialNo">1</td>
                            <td>
                                <select id="expType" name="expenseType">
                                    <option>--Select--</option>
                                </select></td>
                            <td>
                                <input type="text" id="amnt" name="amount" 
/></td>
                            <td>
                                <textarea rows="1" cols="40" id="desc" 
name="description"></textarea></td>
                            <td style="width: 232px;">
                                <input type="date" id="expDate" 
name="expensedate" />
                            </td>

                            <td style="width: 232px;">
                                <input type="file" id="attch" 
name="attachment" /></td>
                        </tr>

                        <tr id="tr2">
                            <td id="claimID 2">2</td>
                            <td>
                                <select id="expType2" name="expenseType">
                                    <option>--Select--</option>
                                </select></td>
                            <td>
                                <input type="text" id="amnt2" name="amount" 
/></td>
                            <td>
                                <textarea rows="1" cols="40" id="desc2" 
name="description"></textarea></td>
                            <td style="width: 232px;">
                                <input type="date" id="expDate2" 
name="expensedate"/>
                            </td>

                            <td style="width: 232px;">
                                <input type="file" id="attch 2" 
name="attachment"/></td>
                        </tr>

                        <tr id="tr3">
                            <td id="claimID 3">3</td>
                            <td>
                                <select id="expType3" name="expenseType">
                                    <option>--Select--</option>
                                </select></td>
                            <td>
                                <input type="text" id="amnt3" 
 name="amount"/></td>
                            <td>
                                <textarea rows="1" cols="40" id="desc3" 
 name="description"></textarea></td>
                            <td style="width: 232px;">
                                <input type="date" id="expDate3" name="expensedate"/>
                            </td>
                            <td style="width: 232px;">
                                <input type="file" id="attch3" name="attachment"/></td>
                        </tr>
                    </tbody>
                </table>

Answer 1

As i see, you have two major error in your code:

$("tbody > tr:nth-child(" + i + ")").children();

This is not an assignment, so you dont actually get the n-th tr childrens value later. For that you need to something like this:

var row = $("tbody > tr:nth-child(" + i + ")").children();
var amount = row.find("input[name=amount]").val();

The second one is this line:

if (!((amount && expenseDate && description) === "")) 
{ /*...*/ }

It's pretty confusing and not correct (this condition is always true). You can write this instead:

if (amount && expenseDate && description) 
{ /*...*/ }

Here is the full code with some modifications. Note, that i do not tested it at all. JS:

$('#Save').on('click', onSaveClickHandler);
function onSaveClickHandler(evt) {
    evt.preventDefault();
    var rows = $("#claims").find('tr');
    var successCount = 0;
    var submissionDate = $('#subDate').val();
    for (var i = 0; i < rows.length; i++) {
        //var claimId = rows.find('#claimID' + i).val();
        var expenseType = rows.find('#expType_' + i).val();
        var amount = rows.find('#amnt_' + i).val();
        var expenseDate = rows.find('#expDate_' + i).val();
        var description = rows.find('#desc_' + i).val();
        var attachment = rows.find('#attch_' + i).val();
        claimId = expenseType.slice(0, 4) + employeeID.val();

        if (amount && expenseDate && description) {
            var oList = context.get_web().get_lists().getByTitle('ExpensesTransaction');
            var itemCreateInfo = new SP.ListItemCreationInformation();
            oListItem = oList.addItem(itemCreateInfo);
            oListItem.set_item('Title', expenseType);
            oListItem.set_item('ClaimID', claimId);
            oListItem.set_item('EmployeeName', employeeName.val());
            oListItem.set_item('EmployeeID', employeeID.val());
            oListItem.set_item('EmployeeDepartment', department.val());
            oListItem.set_item('ManagerName', manager.val());
            oListItem.set_item('Amount', amount);
            oListItem.set_item('SubmissionDate', submissionDate);
            oListItem.set_item('ExpenseDate', expenseDate);
            oListItem.set_item('ExpenseDescription', description);
            oListItem.set_item('Attachment', attachment);
            oListItem.set_item('ClaimStatus', "Pending At Manager");
            oListItem.set_item('ItemID', "item");
            oListItem.update();

            context.load(oListItem);
            context.executeQueryAsync(function onQuerySucceeded() {
                successCount++;
                if (successCount == rows.length) {
                    alert('All Items Added Successfully ');
                }
            }, function onQueryFailed(sender, args) {
                alert('Request failed. ' + args.get_message());
            });
        }
        else {
            alert("Please Fill all required Fields!!");
        }
    }
}

HTML:

<table class='table-fill' id="claims">
    <tr>
        <th>S. No.</th>
        <th>Expense type</th>
        <th>Amount
            <i style="color: red; font-weight: 600">*</i>
        </th>
        <th>Description
            <i style="color: red; font-weight: 600">*</i>
        </th>
        <th>Expense Date
            <i style="color: red; font-weight:600">*</i>
        </th>
        <th>Attachment</th>
    </tr>
    <tbody>
        <tr id="tr_0">
            <td id="claimID_0" class="serialNo">1</td>
            <td>
                <select id="expType_0" name="expenseType">
                    <option>--Select--</option>
                </select>
            </td>
            <td>
                <input type="text" id="amnt_0" />
            </td>
            <td>
                <textarea rows="1" cols="40" id="desc"></textarea>
            </td>
            <td style="width: 232px;">
                <input type="date" id="expDate_0" />
            </td>

            <td style="width: 232px;">
                <input type="file" id="attch_0" />
            </td>
        </tr>

        <tr id="tr_1">
            <td id="claimID_1">2</td>
            <td>
                <select id="expType_1" name="expenseType">
                    <option>--Select--</option>
                </select>
            </td>
            <td>
                <input type="text" id="amnt_1" />
            </td>
            <td>
                <textarea rows="1" cols="40" id="desc_1"></textarea>
            </td>
            <td style="width: 232px;">
                <input type="date" id="expDate_1" />
            </td>

            <td style="width: 232px;">
                <input type="file" id="attch_1" />
            </td>
        </tr>

        <tr id="tr_2">
            <td id="claimID 3">3</td>
            <td>
                <select id="expType_2" name="expenseType">
                    <option>--Select--</option>
                </select>
            </td>
            <td>
                <input type="text" id="amnt_2" />
            </td>
            <td>
                <textarea rows="1" cols="40" id="desc_2"></textarea>
            </td>
            <td style="width: 232px;">
                <input type="date" id="expDate_2" />
            </td>
            <td style="width: 232px;">
                <input type="file" id="attch_2" />
            </td>
        </tr>
    </tbody>
</table>