Saving Dynamic Input Arrays

I'm working on a template that register widget items, and often times this template will have multiple widgets. You can find an example of the current template item section on https://ibb.co/kP7A6K.

Each widget is made of 3 input arrays(position, description and type).

Store TemplateController

public function store(TemplateRequest $request)
    {
        $template = new Template();
        $template->name = $request->name;
        $template->description = $request->description;
        $template->subject = $request->subject;
        $template->save();

        foreach ($request['position'] as $index) {
            $widget = new Widget();
            $widget->description = $request['description'][$index];
            $widget->type = $request['type'][$index];
            $widget->position = $request['position'][$index];
            $widget->template = $template->id;
            $widget->save();
       }

        return redirect()->route('templates.index')->with('message', 'Template created successfully!');
    }

Form of Template

<form class="form-horizontal form-label-left input_mask" method="POST">
    <h4>General Information</h4>
    <div class="form-group">
        <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
            <input type="text" class="form-control has-feedback-left" id="name" name="name" placeholder="Name">
            <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
            <select id="subject" name="subject" class="form-control has-feedback-left" required="">
                <option value="">Choose..</option>
                <option value="1">Hidráulica</option>
                <option value="2">Incêndio</option>
            </select>
            <span class="fa fa-id-badge form-control-feedback left" aria-hidden="true"></span>
        </div>

        <div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
            <textarea class="form-control" rows="3" id="description" name="description" placeholder="Description"></textarea>
        </div>
    </div>

    <div class="col-md-12 col-sm-12 col-xs-12">
        <h4>Widgets
            <!--<button type="button" class="btn btn-danger pull-right"><i class="fa fa-remove"></i> Delete</button>
            <button type="button" class="btn btn-warning pull-right" style="margin-right: 5px;"><i class="fa fa-edit"></i> Edit</button>-->
            <button type="button" id="add-widget" class="btn btn-primary pull-right"><i class="fa fa-plus"></i> Add</button>
        </h4>
    </div>

    <table id="datatable-widgets" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Position</th>
            <th>Description</th>
            <th>Type</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody id="widgets">
            <tr id="1">
                <td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="1"></td>
                <td><input type="text" class="form-control" id="description" name="description[]" placeholder="Description"></td>
                <td>
                    <select id="type" name="type[]" class="form-control" required="">
                        <option value="header">Header</option>
                        <option value="row">Row</option>
                    </select>
                </td>
            </tr>
            <tr id="2">
                <td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="2"></td>
                <td><input type="text" class="form-control" id="description" name="description[]" placeholder="Description"></td>
                <td>
                    <select id="type" name="type[]" class="form-control" required="">
                        <option value="header">Header</option>
                        <option value="row">Row</option>
                    </select>
                </td>
            </tr>
            <tr id="3">
                <td><input type="text" class="form-control" id="position" name="position[]" placeholder="Position" value="3"></td>
                <td><input type="text" class="form-control" id="description" name="description[]" placeholder="Description"></td>
                <td>
                    <select id="type" name="type[]" class="form-control" required="">
                        <option value="header">Header</option>
                        <option value="row">Row</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="ln_solid"></div>
    <div class="form-group">
        <div class="col-md-10 col-sm-10 col-xs-12 col-md-offset-5">
            <button type="button" class="btn btn-primary">Cancel</button>
            <button type="submit" class="btn btn-success">Submit</button>
        </div>
    </div>

</form>

However, I don't know if it is the best way to lead with this case. Is it correct?