form auto closing before the input tags when data is retrieved from ajax call

The problem is that when the data is received from the ajax call with the form and input fields, the form automatically closes right after opening it
eg. <form class='test'></form> <input type="submit"/>
and none of the fields are the child of the form. and because of that, the submit action does not work.

All the data are retrieved perfectly, but the only issue is with the form autoclosing.

I went through many of the suggestions provided in StackOverflow, but could not rectify it.

View

<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

Blockquote

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>';
        }

via Chebli Mohamed