存储功能控制器没有获得价值

Question

im triying to save data with dynamic table in laravel. If there isnt data, when im creating new one, the row successfully save. but when im trying to add new row i get this error:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'description' cannot be null

i have declare the input element name on js as name="description", but still error.

This is my javascript:

<script src="{{ asset ('js/core/jquery.3.2.1.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
    var actions = $(".table-bawah td:last-child").html();
    // Append table with add row form on add new button click
    $(".add-new").click(function(){
        $(this).attr("disabled", "disabled");
        var index = $(".table-bawah tbody tr:last-child").index();
        var row = '<tr>' +
            '<form  id="aboutForm" action= {{route('quoteabout.store')}} method="post" enctype="multipart/form-data">' +
            '@' + 'csrf' +
            '<td><input type="text" class="form-control" name="description" id="description"></td>' +
            '<td>' + actions + '</td>' +
            '</form>'
        '</tr>';
        $(".table-bawah").append(row);      
        $(".table-bawah tbody tr").eq(index + 1).find(".add, .edit").toggle();
        $('[data-toggle="tooltip"]').tooltip();
    });

This is my table:

<table class="table table-bordered-bd-warning table-head-bg-warning table-bawah">
    <thead>
        <tr>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @forelse($dataAboutList as $index => $rowAboutList)
        <tr>
        <form id="aboutForm1" action="{{route('quoteabout.store')}}" method="post" enctype="multipart
/form-data">
        @csrf
            <td>{{ $rowAboutList->description }}</td>
            <td>
                <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons" onclick="
document.getElementById('aboutForm1').submit()">&#xE03B;</i></a>
                <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;
</i></a>
                <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#x
E872;</i></a>
            </td>
        </form>
        </tr>
        @empty
        <tr>
            <form id="aboutForm" action="{{route('quoteabout.store')}}" method="post" enctype="
multipart/form-data">
            @csrf
            <td>
                <input type="text" class="form-control" id="description" name="description" 
placeholder="Isi Judul" required>
            </td>
            <td>
                <a class="add" title="Add" data-toggle="tooltip" style="display: inline-block;" on
click="document.getElementById('aboutForm').submit()"><i class="material-icons">&#x
E03B;</i></a>
                <a class="edit" title="Edit" data-toggle="tooltip" style="display: none;"><i class="
material-icons">&#xE254;</i></a>
                <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#x
E872;</i></a>
            </td>
            </form>
        </tr>
        @endforelse
    </tbody>
</table>

And this is my Controller:

public function storeAboutList(Request $request)
    {
        Quote::create([
            'section'       => "About",
            'description'   => $request->description 
        ]);
    }

Edit: i have update code in table from onclick="document.getElementById('aboutForm1').submit()" to onclick="document.getElementById('aboutForm').submit()"

but action link cant get baseurl like below

Update, i change route in javascript and url already shown, but now i get error Page Expired.