SOLVED: Save multiple row of data from one form

I want to save multiple row of data into database from Javascript form. Can somebody help me out? i have been stuck for few days about it.

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);

    foreach ($request->itemid as $key ){

        $detail = array('goodsreceiveheader_id'=>$i,
                                 'itemid'=>$request->itemid [$key],
                                 'quantity'=>$request->quantity [$key],
                                 'costprice'=>$request->costprice [$key],
    );
         Goodsreceivedetail::insert($detail);
    }

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

    return redirect('goodsreceive/goodsreceiveheader_list');
}

My View:

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

        <div class="col-lg-4 col-sm-6">
            <input name="createdby" type="hidden" value="{{ Auth::user()->name }}">
            {!! 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="{{$vendor->id}}">{{$vendor->vendorid}}</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="{{$item->itemid}}">{{$item->itembarcode}}</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>

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="{{$item->itemid}}">{{$item->itembarcode}}</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!!!')
}