从ajax调用检索数据时，表单在输入标签之前自动关闭

Question

问题是，当从带有表单和输入字段的ajax调用接收到数据时，表单在打开后立即自动关闭
例如。 <form class='test'></form> <input type="submit"/>
并且所有字段都不是表单的子级。因此，提交操作无效。

可以完美地检索所有数据，但是唯一的问题是表单自动关闭。

我经历了StackOverflow中提供的许多建议，但无法纠正它。

查看

<table class="table align-items-center table-bordered table-sm" style="width:100%">
                <thead class="thead-light">
                    <tr>  
                        <th scope="col" >Case Number</th>
                        <th scope="col" >Case Title</th>   
                        <th scope="col" >Hearing Date</th>
                        <th scope="col" >Party Name</th>
                        <th scope="col" >Mobile No.</th>
                        <th scope="col" >Lawyer</th>
                        <th scope="col" >Status</th>
                        <th scope="col" >Next H* Date</th>
                        <th scope="col" >Comments</th>
                        <th scope="col" >Options</th>
                    </tr>
                </thead>
                <tbody class="list" id="viewbody">

                </tbody>
            </table>

search.js

$('#search').on('keyup',function(){
var search = $(this).val();

$.ajax({
    url: "/search",
    type: 'get',
    data: {search:search},
    success: function(data){
        $('#viewbody').html(data);
    },
    error: function(){
        console.log('ajax error');
    }
});

}）;

searchcontroller

foreach($results as $case){
            echo '<form action="'.route('case.update',$case->id).'" id="viewcases1" method="post">'.
            '<tr>'.
                '<input type="hidden" name="_token" value="'.csrf_token().'">'.
                '<input type="hidden" name="_method" value="PUT">'.

                '<td class="budget" >'.$case->caseno.'</td>'.
                '<td class="budget" >'.$case->casetitle.'</td>'.
                '<td class="budget" >'.$case->hearingdate.'</td>'.
                '<td class="budget" >'.$case->partyname.'</td>'.
                '<td class="budget" >'.$case->mobileno.'</td>'.
                '<td class="budget" >'.$case->lawyername.'</td>'.
                '<td class="budget" >'.$case->casestatus.'</td>'.
                '<td class="budget" >'.
                    '<input type="text" size="9" class="hearingdate" name="nexthearingdate" value="'.$case->hearingdate.'"/>'.
                '</td>'.
                '<td class="budget">'.
                '<textarea name="comments" id="comments" cols="20" rows="3" required>'.$case->comments.'</textarea>'.
                '</td>'.
                '<td class="budget text-left" >'.
                    '<button type="submit" class="btn btn-success btn-sm" id="save">save</button>'.
                    '<button class="btn btn-warning btn-sm">View</button>'.
                    '<a href="'.route('case.edit',$case->id).'" class="btn btn-info btn-sm">Edit</a>'.
                    '<button type="button" onclick="deleteCase('.$case->id.')" class="btn btn-danger btn-sm">Delete</button>'.
                '</td>'.
            '</tr>'.
            '</form>';
        }