Laravel Voyager add Custom key value pairs Form fields

AppServiceProvider.php

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Nbin\FormFields\KeyValueFormField;
use TCG\Voyager\Facades\Voyager;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
      ......................
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        Voyager::addFormField(KeyValueFormField::class);
    }
}

key-value-pair.blade.php

@php
    $data = [];
    $relation = camel_case($row->field);

    $data = ($dataTypeContent->has($relation))?old($row->field, $dataTypeContent->{$relation}):old($row->field);
    $extraIndexValue = count($data);
@endphp
@if($extraIndexValue)
    @foreach($data as $key=>$option)
        <div class="appended_div">
            <div class="col-md-4" id="key">
                <div class="form-group">
                    <label for="pname">Key</label>
                    <input type="hidden" name="extra_options_[{{ $key }}][id]" value="{{ $option->id }}">
                    <input type="text" id="extra_options_{{ $key }}_key" name="extra_options[{{ $key }}][key]"  class="form-control key-break" value="{{$option->key}}"/>
                </div>
            </div>

            <div class="col-md-4" id="value">
                <div class="form-group">
                    <label for="pname">Value</label>
                    <input type="text" id="extra_options_{{ $key }}_value" name="extra_options[{{ $key }}][value]"  class="form-control" value="{{ $option->value }}">
                </div>
            </div>
            <div class="col-md-4" style="min-width: 33%;min-height: 100px;">
                <div class="grp-btn">
                    <a href="#" style="" class="btn btn-variant btn-delete option_delete">Delete</a>
                    <a href="#" class="btn btn-variant option_add" id="option_add"><span class="lnr lnr-plus-circle"></span>Add New</a>
                </div>
            </div>
        </div>
    @endforeach
@endif
<div id="extra_option_wrap" class="extra_option_wrap">
    <div class="appended_div" style="margin-top:1px">
        <div class="col-md-4">
            <div class="form-group">
                <label for="pname">Key</label>
                <input name="extra_options[{{ $extraIndexValue }}][key]" type="text" class="form-control indexed">
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="pname">Value</label>
                <input type="text" name="extra_options[{{ $extraIndexValue }}][value]" class="form-control indexed">
            </div>
        </div>
        <div class="col-md-4" style="min-width: 33%;min-height: 100px;">
            <div class="grp-btn">
                <a href="#" style="display:none;" class="btn btn-variant btn-delete option_delete">Delete</a>
                <a href="#" class="btn btn-variant option_add" id="option_add"><span class="lnr lnr-plus-circle"></span>Add New</a>
            </div>
        </div>
    </div>
</div>
<div id="extra_options_append" class="extra_options_append"></div>

@section('javascript')
    @parent
    <script>
        var newIndex = {{ $extraIndexValue }};
        var newIndexValue = {{ $extraIndexValue }};
        $(document).on('click','.option_add',function (e) {
            e.preventDefault();
            var cur_form = $(this).closest('.panel');
            var append_cont = $(cur_form).find('.extra_option_wrap').html();
            $(cur_form).find('.option_add').hide();
            $(append_cont).find('.option_delete').show();
            $(cur_form).find('.extra_options_append').append(append_cont);
            $(cur_form).find('.extra_options_append').find('.option_delete').show();
            $(cur_form).find('.extra_options_append').find('.option_add:last').show();
            newIndex = newIndex+1;
            makeValues('.extra_options_append','extra_options',newIndex,newIndexValue);

        });


        function makeValues(selector,nameKey,newIndex,currentIndex)
        {
            console.log(nameKey);
            $(selector).find('.appended_div:last').find('.indexed').each(function (k,v) {
                var oldName = $(v).attr('name');
                var oldId = $(v).attr('id');
                var newName = oldName.replace(nameKey+"["+currentIndex+"]",nameKey+"["+newIndex+"]");
                $(v).attr('name',newName);
                if(oldId){
                    var newId = oldId.replace(nameKey+"_"+currentIndex+"_",nameKey+"_"+newIndex+"_");
                    $(v).attr('id',newId);
                }

            });

        }

        $(document).on('click','.option_delete',function (e) {
            e.preventDefault();
            var cur_form = $(this).closest('.panel');
            $(this).parent().parent().parent().remove();
            $(cur_form).find('.appended_div:last').find('.option_add').show();
        });
    </script>
@stop

KeyValueFormField.php

<?php
/**
 * Created by PhpStorm.
 * User: nbin
 * Date: 2/25/19
 * Time: 9:55 PM
 */
use TCG\Voyager\FormFields\AbstractHandler;

class KeyValueFormField extends AbstractHandler
{
    protected $codename = 'key-value-pair';

    public function createContent($row, $dataType, $dataTypeContent, $options)
    {
        return view('formfields.key-value-pair', [
            'row' => $row,
            'options' => $options,
            'dataType' => $dataType,
            'dataTypeContent' => $dataTypeContent
        ]);
    }
}