Laravel Save multiple images in multiple fields

So I have a table called 'images' and inside it I have fields in database like 'image1''image2' etc.

Now, the user is uploading each image individually so in a form there are 8 fields for uploading 8 different images, however how do I save this server side? I know how to upload 1 image but how can I do it for multiple images?

Here's my code so far and I am getting these errors:

Uncaught TypeError: Cannot read property 'gallery' of undefined

and

POST http://localhost:8000/gallery 404 (Not Found)

Controller:

    public function gallery(Request $request) {
    if($request->hasFile('gallery'))
    {
        $image = Input::file('gallery');
        $files = count($files);
        $uploadcount = 0;
        foreach($files as $file) {
        $filename = time() . '.' . $image->getClientOriginalExtension();
        $path = public_path('gallery/' . $filename);
        $image_path = ('gallery/' . $filename);
        Image::make($image->getRealPath())->fit(60, 51)->save($path);
        $uploadcount++;
        $file = $request->file('gallery');
        $session = session()->get('key');
        $gallery = new Image();
        $gallery->image1 = $image_path;
        $gallery->business_id = $session;
        $gallery->save();
        return ['url' => url('gallery/' . $filename)];
        }
    }

AJAX:

function submitGallery() {
    var fd = new FormData($(".upload_gallery")[0]);
    fd.append('img', $('.img'));
    $.ajax({
        url: '/gallery',
        data: fd,
        dataType: 'json',
        async: false,
        type: 'post',
        processData: false,
        contentType: false,
        success: function(data) {
            $(".images").attr("src", data.url);
            $('.messages').append('<div class="alert alert-success">Image Uploaded!<div>');
            $(".alert-success").fadeOut(5000);
        },
        error: function(data) {
            var errors = data.responseJSON; //this will get the errors response data.
            //show them somewhere in the markup
            //e.g
            var errorsHtml = '<div class="alert alert-danger">';
            errorsHtml += errors.gallery[0]; //showing only the first error.
            errorsHtml += '</div>';
            $('.messages').append('<div class="alert alert-danger">File type not supported! Use files with image extension only!<div>'); //appending to a <div id="form-errors">
            $(".alert-danger").fadeOut(5000);
        }
    });
}

Blade:

 <div id="gallery" class="sortable">
                        <form class="upload_gallery" action="" enctype="multipart/form-data" role="form" method="POST">
                        <input type="hidden" name="_token" value="">
        <div id="image1" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image2" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image3" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image4" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image5" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image6" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image7" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
        <div id="image8" class="image-gallery">
                        <img class="images" src="#" />
                            <input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file"  data-size="sm" data-badge="false" onchange="submitGallery();" />
                        </div>
                    </form>     
    </div>

Route:

Route::post('gallery', 'BusinessController@gallery');

Of course if you know of a better approach to do this than mine, please tell me I am open to suggestions

via Chebli Mohamed