Inserting a chip in a database and show it from the database in Laravel 8 and Materialize CSS

I want to insert multiple chips at a time in the database.

Here is my add task page, and there is one select field. If I select the checkbox then another field is visible. To enter the chips I can enter multiple chips for one select box. How do I enter these chips into the database?

And also I want to show these chips to users in form of a checkbox. If I use the checkbox in the select box and enter multiple chips then those multiple chips become checkboxes on the user side. How can I do this?

<div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
        <h4 class="card-title">Add Task</h4>
            <form class="forms-sample" action="{{ route('store.task', $checklist->id) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="exampleInputUsername1">Task Name</label>
                    <input name="name" type="text" class="form-control" id="name" required>
                    <span id="task" class="text-danger"></span>
                    @error('name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="exampleTextarea1">Description</label>
                    <textarea name="description" class="form-control" name="summernote" id="summernote1" required></textarea>
                </div>
                @error('description')
                    <span class="text-danger">{{ $message }}</span>
                @enderror

                <div class="row">
                    <div class="col-md-6">
                        <select class="form-control" id="select" required>
                            <option disabled="" selected="">--Select Option--</option>
                            <option value="text">Text</option>
                            <option value="textarea">Text Area</option>
                            <option value="checkbox">Check Box</option>
                            <option value="radio">Radio</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <input name="name" type="text" class="form-control" id="name1" style="display: none">
                        <textarea name="description" class="form-control" id="textbox" style="display: none"></textarea>
                        <div class="chips" id="chips" style="display: none">
                            <input class="custom-class">
                        </div>
                        <div class="chips" id="chips1" style="display: none">
                            <input class="custom-class">
                        </div>
                    </div>
                </div>
                <button name="submit" type="submit" class="btn btn-primary mr-2">Add</button>
            </form>
        </div>
    </div>
</div>

And my task table contains the following fields: id, name, description, and checklist_id

Which field should I add and how can I insert these chips in the database and show them in form of checkboxes?

Solution

I managed to store the chip data in the database. I passed the data to a hidden div on the "click" event for the button, like so:

<script>
    $(document).ready(function(){

        $("#button").on("click", function() {

            var chips = M.Chips.getInstance($('.chips')).chipsData;
            var sendChips = JSON.stringify(chips);
            $('#chipss').val(sendChips);
        });
    });
</script>

And the empty div is:

<input id="chipss" type="hidden" name="chip3">

For passing this data to the database:

Task::insert([
          'name' => $request->name,
          'description' => $request->description,
          'checklist_id' => $checklist_id,
          'options' => $request->select,
          'created_at' => Carbon::now(),
          'created_by' => session('firstname'),
          'value' => $request->chip3
      ]);

And in your task modal you have to cast it as an array:

protected $casts = [
    'value' => 'array'
];

And also your value field must be json in your database be sure to add the value field with the json type.

And for displaying this data, I want to share the following piece of code:

<div class="form-group">
    @foreach(json_decode($work->value,true) as $value)
    <div class="form-check form-check-primary">
        <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="value" value="1"> {{ $value['tag'] }} <i class="input-helper"></i></label>
    </div>
    @endforeach
</div>

This will show only your chips data you have inserted.