Laravel编辑更新JSON数组并使用JavaScript删除特定输入

如何将保存在数据库中的JSON数组加载到编辑表单输入字段

下面是我的创建表单的外观

这是表格代码

        <div class="card">
        <h5 class="card-header">
            Manage Extras
        </h5>


        <div class="card-body">

            <div class="optionBox">
                <div class="block main">
                    <div class="form-row pb-2">
                        <div class="col">
                          <input type="text" class="form-control" name="extras_name[]" value="" placeholder="Name">
                        </div>
                        <div class="col">
                          <input type="text" class="form-control" name="extras_price[]" placeholder="Price">
                        </div>
                        <div class="col">
                            <button type="button" class="remove btn btn-danger"><i class="fas fa-trash-alt"></i></button>
                        </div>
                    </div>
                    <div class="block mt-2 ">
                        <button type="button" class="add btn btn-success">Add Extras</i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

下面是它在数据库中的保存方式

这是

控制器中的
编辑功能

public function edit(CustomProduct $customProduct)
{

    $data = [
        'customProduct'=>$customProduct,
    ];

    return view('manage.custom-products.edit')->with($data);
}

我能够使用foreach将数据加载到表单中，如下所示

             <div class="row">
                <div class="col">
                    <strong>Names</strong>
                    @foreach ($customProduct['extras_name'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
                <div class="col">
                    <strong>Prices</strong>
                    @foreach ($customProduct['extras_price'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
            </div>


名称
@foreach（$customProduct['extras_name']作为$item）
{{$item}}
@endforeach
价格
@foreach（$customProduct['extras_price']作为$item）
{{$item}}
@endforeach

下面是它的样子

我只想在编辑时将json数据加载到输入字段中，并且应该能够通过单击delete图标删除pacific输入

我怎样才能做到这一点，请帮助我
嗨，你试过下面的代码吗？这对你有用吗？@Swati是的，我试过了，但没用
             <div class="row">
                <div class="col">
                    <strong>Names</strong>
                    @foreach ($customProduct['extras_name'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
                <div class="col">
                    <strong>Prices</strong>
                    @foreach ($customProduct['extras_price'] as $item)
                         <li>{{ $item }}</li>
                    @endforeach
                </div>
            </div>