jQueryで増やした入力項目の値がNULLになり送信できない

Question

開発環境

Laravel　5.8.35

困っている事

jQueryで増やした入力項目をControllerに送信したいのですが、後から増やした入力項目に入力した値がNULLになり送信することが出来ません。
何が原因なのでしょうか。

問題のコード

<section id="select">
    <input type="text" name="question_item" class="form-control" placeholder="サンプルテキストサンプルテキストサンプルテキスト">
    <button type="button" class="add pluralBtn">追加</button>
    <button type="button" class="del pluralBtn">削除</button>
</section>

$(function () {
    $(document).on("click", ".add", function() {
        $(this).parent().clone(true).insertAfter($(this).parent());
    });
    $(document).on("click", ".del", function() {
        var target = $(this).parent();
        if (target.parent().children().length > 1) {
            target.remove();
        }
    });
});

FormController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\FormQuestionChild;


class FormController extends Controller
{
    public function showCreateForm()
    {
        return view('form/create');
    }

    public function create(Request $request)
    {
        $formQuestionChild = new FormQuestionChild();

        $formQuestionChild->question_child_name = $request->question_item;

        $formQuestionChild->save();
    }
}

よろしくお願いします。

Comments

[m.ts10806]

.addQuestionはどこでしょう
#questionはどこでしょう
あと、コントローラ側のコードもご提示ください

[dauto]

修正しました。
.addQuestionの部分は消し忘れの為削除しました。

Answer 1

単にcloneしてそのまま＝nameも変わらない
ので、同nameの入力コントロールが生成され続けることになるはずです。
同nameですとラジオボタンと同じ、最後の1つしか送信されません。
[]をつけて配列にするか、個別のnameをつけましょう。

Answer 2

こんな感じです

<?PHP
$question_item=filter_input(INPUT_POST,'question_item',FILTER_VALIDATE_REGEXP,[
  "flags"=>FILTER_REQUIRE_ARRAY,
  "options"=>["regexp"=>"/./"],
  ]);
var_dump($question_item);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
  $('.select').on("click", ".add", function() {
    var target = $(this).closest('section');
    target.clone(true).insertAfter(target);
  });
  $('.select').on("click", ".del", function() {
    var target = $(this).closest('section');
    if (target.siblings().length > 1) {
      target.remove(false);
    }
  });
});
</script>
<form method="post">
<section class="select">
    <input type="text" name="question_item[]" class="form-control" placeholder="サンプルテキストサンプルテキストサンプルテキスト">
    <button type="button" class="add pluralBtn">追加</button>
    <button type="button" class="del pluralBtn">削除</button>
</section>
<input type="submit" value="send">
</form>