multi data with multi options storing

Hi , i have A Exam Model at my system and it be like

Exams 
Questions
Options 

And this exam contains the lecture_id , And the question has exam_id with the question and is_required column with correct_option and the options have the option and question_id , and i need my Admin to create a Exam with multi questions and each question has a options etc ... so at blade i create code like

<form class="form-valide" action="{{ route('admin.quizzes.store') }}" method="post" id="moderator-form"> @csrf <div class="form-group row">
    <label class="col-lg-2 col-form-label" for="lecture_id">المحاضره <span class="text-danger">*</span>
    </label>
    <div class="col-lg-10">
      <select class="js-select2 form-control" id="lecture_id" name="lecture_id" style="width: 100%;">
        <option selected disabled>قم بآختيار المحاضره</option> @foreach($lectures as $lecture) <option {{ old('lecture_id') == $lecture->id ? 'selected' : '' }} value="{{$lecture->id}}">{{ $lecture->name }}</option> @endforeach
      </select> @error('lecture_id') <small class="text-danger">{{$message}}</small> @enderror
    </div>
  </div>
  <div id="questions-container">
    <!-- Container to hold dynamically added questions -->
    <!-- Initial question input -->
    <div class="form-group row question">
      <label class="col-lg-2 col-form-label" for="question">السؤال <span class="text-danger">*</span>
      </label>
      <div class="col-lg-10">
        <textarea name="questions[0][question]" id="question" placeholder="السؤال" style="min-height: 150px" class="form-control"></textarea>
      </div>
    </div>
    <div class="form-group row col-12">
      <label class="col-lg-2 col-form-label">الخيارات <span class="text-danger">*</span>
      </label>
      <div class="col-lg-10 row">
        <div class="form-group col-3 option">
          <label class="col-lg-4 col-form-label" for="option">الخيار A</label>
          <div class="col-lg-10">
            <input type="text" name="questions[0][options][a]" id="option" placeholder="الخيار" class="form-control">
          </div>
        </div>
        <div class="form-group col-3 option">
          <label class="col-lg-4 col-form-label" for="option">الخيار B </label>
          <div class="col-lg-10">
            <input type="text" name="questions[0][options][b]" id="option" placeholder="الخيار" class="form-control">
          </div>
        </div>
        <div class="form-group col-3 option">
          <label class="col-lg-4 col-form-label" for="option">الخيار C</label>
          <div class="col-lg-10">
            <input type="text" name="questions[0][options][c]" id="option" placeholder="الخيار" class="form-control">
          </div>
        </div>
        <div class="form-group col-3 option">
          <label class="col-lg-4 col-form-label" for="option">الخيار D</label>
          <div class="col-lg-10">
            <input type="text" name="questions[0][options][d]" id="option" placeholder="الخيار" class="form-control">
          </div>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-lg-2 col-form-label">الإجابة الصحيحة <span class="text-danger">*</span>
      </label>
      <div class="col-lg-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][correct_answer]" value="a" id="correct_answer_a">
          <label class="form-check-label" for="correct_answer_a">الخيار A</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][correct_answer]" value="b" id="correct_answer_b">
          <label class="form-check-label" for="correct_answer_b">الخيار B</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][correct_answer]" value="c" id="correct_answer_c">
          <label class="form-check-label" for="correct_answer_c">الخيار C</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][correct_answer]" value="d" id="correct_answer_d">
          <label class="form-check-label" for="correct_answer_d">الخيار D</label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label class="col-lg-2 col-form-label">هل السؤال إجباري ؟ <span class="text-danger">*</span>
      </label>
      <div class="col-lg-10">
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][is_required]" value="1" id="is_required_no">
          <label class="form-check-label" for="is_required_no">نعم</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="questions[0][is_required]" value="0" id="is_required_yes">
          <label class="form-check-label" for="is_required_yes">لا</label>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-lg-10 offset-lg-2">
      <button type="button" id="add-question-btn" class="btn btn-primary">اضافة سؤال اخر</button>
    </div>
  </div>
</form>

and at the JS i write the same code but i put a counter variable instead of 0 that i put at the form

 window.onload = function() {
            // Add question button click event handler
            let  counter = 0;
            $('#add-question-btn').click(function() {
                counter++;
                var questionHtml = // same html code but ${counter} instead 0 ;
      // Append the new question input and correct answer group to the questions container
                $('#questions-container').append(questionHtml);
            });
        };

and my controller is like

public function store(Request $request)
{
    // Validate the form data
    $validatedData = $request->validate([
        'lecture_id' => 'required',
        'questions' => 'required|array',
        'questions.*.question' => 'required',
        'questions.*.options' => 'required|array',
        'questions.*.correct_answer' => 'required',
        'questions.*.is_required' => 'required',
    ]);

    // Create a new exam
    $exam = Exam::create([
        'lecture_id' => $validatedData['lecture_id'],
    ]);

    // Iterate over each submitted question
    foreach ($validatedData['questions'] as $questionData) {
        // Create a new question
        $question = Question::create([
            'exam_id' => $exam->id,
            'question' => $questionData['question'],
        ]);

        // Iterate over each option for the current question
        foreach ($questionData['options'] as $optionKey => $optionValue) {
            // Create a new option
            $option = Option::create([
                'question_id' => $question->id,
                'option' => $optionValue,
            ]);

            // Check if the current option is the correct answer
            if ($optionKey === $questionData['correct_answer']) {
                // Create a new correct answer record
                CorrectAnswer::create([
                    'question_id' => $question->id,
                    'correct_option' => $option->id,
                ]);
            }
        }
    }

    // Redirect or perform any additional actions

    // Return a response indicating successful storage, if needed
}

i feeling like it's bad code or wrong way to build the Exam system , so everything is right here ?