Why POST request will be called multiple times based on the array during submit form via ajax to the server?

Asked by: Zidance

I push the id into the array when checkbox is checked.

var items=[];
$("#selection").click(function(e) {
       $(":checkbox").each(function() {
            if(this.checked === false) {
                this.checked = true;
                items.push(this.id);
            }
        });
});

When I submit, the item saved to database but at the "network monitor', it displays a lot of POST request which is unusual.

$('#grid').submit(function(e){

            $.ajaxSetup({
                headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
            });
            e.preventDefault();

            var formdata = {
                item:items
            };
            $.ajax({
                type: "POST",
                url: "/addItem",
                data: formdata ,
                dataType:'json',
                success: function(data) {
                    swal(
                        'Great!',
                        'Item added!',
                        'success'
                    ) ;
                }
            });

        });

During submit the first value is always pass null, but all data will be saved as expected just the POST request will be called based on the number of item in items array. Is there anything wrong with my code?

Source