سابمیت نشدن inputbox ایجاد شده با جاوا اسکریپت

سلام
من یک فرم به شکل زیر دارم که وقتی کاربر روی دکمه add input کلیک میکنه یک inputbox به فرم اضافه میشه تا اینجای کار درسته اما وقتی سابمیت میکنم inputbox جدید سابمیت نمیشه فقط اونایی که قبلا بودن سابمیت میشن

           <form action="{{route('about.status')}}" method="post">
                    @csrf
                    <tr class="text-center">
                        @foreach($abouts as $item)
                            <td><input type="text" value="{{$item->icon}}" name="icon[]"></td>
                            <input type="hidden" name="id[]" value="{{$item->id}}">
                            <td><input type="text" value="{{$item->iTitle}}" name="iTitle[]"></td>
                            <td><input type="text" value="{{\Illuminate\Support\Str::limit($item->iCaption,50)}}" name="iCaption[]"></td>
                            <td class="w-25">
                                <a title="edit" class="btn btn-sm btn-warning" href="{{route('about.edit',$item->id)}}"><i class="fa fa-pen"></i></a>
                            </td>
                    </tr>
                    @endforeach
                    <button type="submit" class="btn btn-success">ثبت</button>
                    <div id="add-form"></div>
                </form>

اسکریپت

    <script>
        function GFG_Fun() {

            var form = document.createElement("tr");
            var FN = document.createElement("input");
            FN.setAttribute("type", "text");
            FN.setAttribute("name", "Email[]");

            form.appendChild(FN);
            document.getElementById('add-form')
                .appendChild(form);
        }
    </script>```