undefined offset: 1 when storing data from dynamic form - php

Question

I'm trying to save data to the database using a dynamic form using javascript, I followed several methods from the internet, but when I try to send data to the database, there is an error undefined offset: 1 in the following line:
'question' => $question[$i], (On controller)
can anyone help me?
here is the form.blade.php
<form action="{{ url('/rating/post-form') }}" method="POST">
#csrf
<div class=" col-sm-12 nopadding form-group">
<label for="survei_tag">Kategori</label>
<input type="text" class="form-control" id="survei_tag" name="survei_tag">
</div>
<div class="col-sm-12 nopadding form-group">
<label for="judul">Judul</label>
<input type="text" class="form-control" id="judul" name="judul">
</div>
<div id="education_fields"></div>
<div class="col-sm-12 nopadding">
<div class="form-group">
<label for="pertanyaan">Pertanyaan</label>
<input type="text" class="form-control" id="question" name="question[]"
placeholder="Tambahkan Pertanyaan">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_1" name="opsi_1[]"
placeholder="Opsi 1">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_2" name="opsi_2[]"
placeholder="Opsi 2">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_3" name="opsi_3[]"
placeholder="Opsi 3">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<div class="form-group">
<input type="text" class="form-control" id="opsi_4" name="opsi_4[]"
placeholder="Opsi 4">
</div>
<div class="input-group-btn">
<button class="btn btn-success" type="button"
onclick="education_fields();">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<button type="submit" class="btn btn-primary pull-right">
Simpan
</button>
</form>
here is the main.js
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = `
<div class="col-sm-12 nopadding">
<div class="form-group">
<label for="question">Pertanyaan</label>
<input type="text" class="form-control" id="question" name="question[]"
placeholder="Tambahkan Pertanyaan">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_1" name="opsi_1[]"
placeholder="Opsi 1">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_2" name="opsi_2[]"
placeholder="Opsi 2">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="opsi_3" name="opsi_3[]"
placeholder="Opsi 3">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<div class="form-group">
<input type="text" class="form-control" id="opsi_4" name="opsi_4[]"
placeholder="Opsi 4">
</div>
<div class="input-group-btn">
<button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
<div class="clear">
</div>
`;
objTo.appendChild(divtest);
}
function remove_education_fields(rid) {
$
('.removeclass' + rid).remove();
}
here is the model :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use App\Traits\Uuids;
class questions extends Model
{
use HasFactory,Uuids;
protected $table = 'survei_questions';
public $timestamps = true;
protected $fillable = [
'survei_tag',
'question_number',
'question',
'sq_instansi_id',
'sq_user_id',
'judul',
'opsi_1',
'opsi_2',
'opsi_3',
'opsi_4'
];
}
here is the controller :
public function storeQuestions(Request $request){
$request->validate([
'survei_tag' =>'required|string|max:255',
'judul' => 'required|string',
'question' => 'required|string',
'opsi_1' => 'required|string',
'opsi_2' => 'required|string',
'opsi_3' => 'required|string',
'opsi_4' => 'required|string',
]);
$survei_tag = $request->survei_tag;
$judul = $request->judul;
$question = $request->question;
$opsi_1 = $request->opsi_1;
$opsi_2 = $request->opsi_2;
$opsi_3 = $request->opsi_3;
$opsi_4 = $request->opsi_4;
for ($i = 1; $i <= count($question); $i++) {
$saveData = [
'survei_tag' => $survei_tag,
'question_number' => $i,
'question' => $question[$i],
'sq_instansi_id' => Auth::user()->instansiID,
'sq_user_id' => Auth::id(),
'judul' => $judul,
'opsi_1' => $opsi_1[$i],
'opsi_2' => $opsi_2[$i],
'opsi_3' => $opsi_3[$i],
'opsi_4' => $opsi_4[$i]
];
DB::table('survei_questions')->insert($saveData);
}
return Redirect::to('/rating/create-form')->with('success','Data berhasil disimpan');
}