How do I add returned JavaScript array items to specific textboxes

Question

I called a URL using AJAX using the following code below and it returned 2 items in an array in this format ["item1", "item2"]

function getbook()
{        
    $.ajax({
        type: "POST",
        url: "/Home/getBooked",
        data: { "bookNumber": mobile },
        success: function(succ) { // I need to add the items in succ to some text boxes as shown below
            $.each(succ, function (index, element) {
                    $('#tb1').val(element);
                    $('#tb2').val(element);
            });                           
        },
        error: function(err) { 
            alert("An error is thrown"); 
        }
    });
}

But the issue is that only the last item in the succ array is shown in both the textboxes. When I used the alert function to display the contents of succ , it displayed both the items. Clearly i'm missing something. I'll be glad if anyone could help.

Answer 1

The problem is you are setting the value in each iteration. Try like following.

success: function (succ) { 
    $('#tb1').val(succ[0]);
    $('#tb2').val(succ[1]);
}

Answer 2

if the IDs of textbox is kind of sequence then we can resolve like bellow:

        $.each(succ, function (index, element) {
            $('#tb'+ (index + 1)).val(element);
        });