laravel mutliple row save to database

I am a laravel beginner. Currently i am learning to do an inventory system. I have two table: goodsreceiveheader and goodsreceivedetail.

What can i do to allow multiple row save into database when submit button are clicked. Hope somebody will help me out as i had stuck in this for a few weeks=(

For goodsreceiveheader table, i have the field of:

id,
referencenumber,
vendorid(FK),
date,
createdby.

While goodsreceivedetail table, i have the field of:

id,
goodsreceiveheader_id(FK),
itemid(FK),
quantity,
costprice.

create.blade.php

@extends('admin.layout')

@section('content')
    <fieldset>
        <legend>Create New Goods Receive</legend>
        @include('layouts.error')
        {!! Form::open(['url' => 'goodsreceive/save', 'method'=>'post']) !!}
        @include('goodsreceiveheader.partial._goodsreceiveheader_form')
        {!! Form::close() !!}


    </fieldset>
@endsection

My view:

<style>
    div#gr{
        padding: 20px;
        border:1px solid black;
    }
</style>
<div class="container">
    <h2>Goods Receive</h2>

    <hr>

        <div id="gr" class="row" style="background-color: lightgoldenrodyellow">

            <div class="col-lg-4 col-sm-6">
                <input name="createdby" type="hidden" value="">
                {!! Form::label('referencenumber', 'Reference Number:')!!}
                <div class="form-group">
                    <input type="text" name="referencenumber" class="form-control" placeholder="Reference Number">
                </div>
            </div>

            <div class="col-lg-4 col-sm-6">
                    {!! Form::label('date', 'Receive Date:')!!}
                    {!! Form::date('date',null,['class'=>'form-control']) !!}
            </div>

            <div class="col-lg-4 col-sm-6">
                {!! Form::label('vendorid', 'Vendor ID:')!!}
                <select name="vendorid" class="form-control">
                    <option value="" selected disabled>Please Select Vendor..</option>
                    @foreach($vendors as $vendor)
                        <option value=""></option>
                    @endforeach
                </select>
            </div>
        </div>
    <br>

    <table class="table table-bordered">
        <thead>
        <th>Item Barcode</th>
        <th>Quantity</th>
        <th>Cost Price</th>
        <th style="text-align: center;background: #eee">
            <a href="#" onclick="addRow()">
                <i class="glyphicon glyphicon-plus"></i>
            </a>
        </th>
        </thead>
        <tbody>
        <tr>
            <td>
                <select class="form-control" name="itemid">
                    <option value="" selected disabled>Select Barcode</option>
                    @foreach($items as $item)
                        <option value=""></option>
                    @endforeach
                </select>
            </td>
            <td><input type="text" name="quantity" class="form-control quantity"></td>
            <td><input type="text" name="costprice" class="form-control costprice"></td>
            <td  style="text-align: center"  onclick="cannotdelete()">
                <a href="#" class="btn btn-danger remove">
                    <i class="fa fa-times"></i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>

    <br>

    <button type="submit" class="btn btn-primary pull-right">Submit</button>

</div>

<script type="text/javascript">
    function addRow()
    {
        var tr='<tr>'+
                '<td>'+
                '<select class="form-control" name="itemid">'+
                '<option value="" selected disabled>Select Barcode</option>'+
                '@foreach($items as $item)'+
                '<option value=""></option>'+
                '@endforeach'+
                '</select>'+
                '</td>'+
                '<td><input type="text" name="quantity" class="form-control quantity"></td>'+
                '<td><input type="text" name="costprice" class="form-control costprice"></td>'+
                '<td class="remove" style="text-align: center"><a href="#" class="btn btn-danger" onclick="deleteRow()"><i class="fa fa-times"></i></a></td>'+
                '</tr>';

        $('tbody').append(tr);
    }

    function deleteRow()
    {
        $(document).on('click', '.remove', function()
        {
            $(this).parent('tr').remove();
        });
    }

    function cannotdelete()
    {
        alert('You cannot delete the first row!!!')
    }

</script>

My controller:

 public function save(GoodsreceiveheaderRequest $request)
    { $data = array(
            'referencenumber'=>$request->referencenumber,
            'vendorid'=>$request->vendorid,
            'date'=>$request->date,
            'createdby'=>$request->createdby,
        );
        $i = DB::table('goodsreceiveheader')->insertGetId($data);

        $goodsreceivedetail = array(
            'goodsreceiveheader_id'=>$i,
            'itemid'=>$request->itemid,
            'quantity'=>$request->quantity,
            'costprice'=>$request->costprice,
        );

        $s = DB::table('goodsreceivedetail')->insert($goodsreceivedetail);

        Session::flash('message','You have successfully create goods receive.');

        return redirect('goodsreceive/goodsreceiveheader_list');
    }

via Nick