I'm trying to add a row(s) on button click... below is my code.
Problem
1) I have added a dropdownlist for the newly added user to select, how can i know the selected item?
2) I have a hidden column but since it is a rowid I want to know the rowid value, how to map the rowid value and post it back in json response.

 "columnDefs":
               [
                   {
                       "targets": [0],
                       "visible": false,
                       "searchable": false,
                       "width": "10px"
                   },
                   {
                       "targets": [1],
                       "visible": true,
                       "searchable": true,
                       "width": "10px"
                   },

3) My newly added row doesn't show in the json response that is posted back

    @section scripts{
        <script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-3.3.1.min.js"></script>
        <link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
        <link href="~/Content/datatablesStyle.css" rel="stylesheet" />
        <script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
        <script src="~/Scripts/jqueryMilestoneMetadata.js"></script>

        <script type="text/javascript">

            $(document).ready(function () {
                var table = $('#demoGrid').DataTable();

                $('#demoGrid tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });
            });     



            $(function () {
                $('#addbtn').on('click', function () {
                    var t = $('#demoGrid').DataTable();                
                    t.row.add({
                        "Rowid": 0,
                        "City": '<div>'+
                            '<select class= "selectpicker">' +
                            '<option value ="1">UP</option>'+
                            '<option value ="2">AP</option> '+
                            '<option value ="3">CDR</option> '+                        
                            '</select></div>',
                        "IsActive": '1'
                    }).draw(false);
                });
            });


            //Code to save changes
            $(function () {
                $('#submitbtn').on('click', function () {
                    var tr = $($("#demoGrid").get(0)).find("tr:gt(1)");
                    debugger;
                    var list = [];
                    var listtr = [];
                    jQuery.ajaxSettings.traditional = true;
                    $(tr).each(function (i, n) {
                        var j = 0;
                        var listtd = {};
                        listtd.Rowid = $(n).find("td:eq(" + j + ")").text();
                        listtd.City = $(n).find("td:eq(" + j + 1 + ")").text();
                        listtd.IsActive = $(n).find("td:eq(" + j + 8 + ")").text();
                        listtr.push(listtd);
                    });

                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("method", "controller")',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        data: JSON.stringify({data: listtr}),
                        success: function (data) {
                            alert(111);

                        }
                    })
                });
            });
        </script>
    }
    <body>
        <div class="container">        
            <div class="display">
                <input type="button" value="Add New" id="addbtn" class="btn btn-primary btn-xs" />
                <input type="button" value="Submit" id="submitbtn" class="btn btn-primary btn-xs" style="float: right; " />
                <div style="height:5px"></div>
                <table id="demoGrid" class="table table-striped table-bordered dt-responsive wrap" cellspacing="0">                
                    <thead>
                        <tr>
                            <th>Rowid</th>
                            <th>City</th>
                            other columns...
                            <th>IsActive</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </body>