How to append table row inside another table when selecting dropdown list in JavaScript?

I have a table that I am creating on button click. When I get my table rows, there is a dropdown on which onchange event is called. So I want to display another row inside parent table when select any of the options from list.

Below is my script where I am creating table:

function searchdata(){
    var companyid = $("#searchQueryDD").val();
    var truckid = $("#searchtruckdd").val();
    var url = "api/gettablebycompanyandtruck";
    $.post(url, {
        companyid : companyid,
        truckid : truckid,
        limit : limit,
    }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    console.log(data.response);
                    var list = data.response;
                    var row = "";
                    if(list.length > 0){
                        for(var i = 0; i < list.length; i++){
                            row = row + "<tr>" +
                                            "<td>"+list[i].company.companyname+"</td>" +
                                            "<td>"+list[i].driver.username+"</td>" +
                                            "<td>"+list[i].truck.name+"</td>" +
                                            "<td>"+list[i].tripnumber+"</td>" +
                                            "<td><select>" +
                                            "<option selected disabled>Choose subtrip</option><option value='1'>1</option>" +
                                            "<option value='2'>2</option><option value='3'>3</option></select></td>"+
                                            "<td>"+list[i].pickupdate+"</td>" +
                                            "<td>"+list[i].deliverydate+"</td>"+
                                            "<td>"+list[i].loadrate+"</td>" +
                                            "<td>"+list[i].dispatchfee+"</td>" +
                                            "<td>"+list[i].fuel+"</td>" +
                                            "<td>"+list[i].cardfee+"</td>" +
                                            "<td>"+list[i].onroadrepair+"</td>" +
                                            "<td>"+list[i].shoprepair+"</td>" +
                                            "<td>" +
                                                "<a data-toggle='modal' data-target='#mode_payment' onclick="getpayment('"+list[i].tripid+"');">"
                                                    +"<i class='fa fa-paypal' aria-hidden='true' style='color:#3585a5'></i>" +
                                                "</a>" +
                                                "<a onclick="getTrip('"+list[i].tripid+"');">"
                                                    +"<i class='fa fa-pencil-square-o ml-3' style='color: #3384a4;'></i>" +
                                                "</a>" +
                                                "<a href='invoice?id="+list[i].tripid+"'>"
                                                    +"<i class='fa fa-file-pdf-o ml-3' aria-hidden='true' style='color:red'></i>" +
                                                "</a>" +
                                            "</td>" +
                                        "</tr>";
                                    }
                             }
                            document.getElementById('searchresulttable').innerHTML = row;
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
} 

Screenshot to display table row
Screenshot to display dropdown