How to add a new row in [DataTables] inside it and extract the value from it.

I want a way to extract a value from input after adding the row manually, I actually added but the value is not showing up.

<button class="btn btn-success btn-sm d-grid mb-3" onclick="addrow()">New Item</button>
<table id="Task_Item">
<thead>
<tr>
<th class="">Id</th>
<th>Name</th>
</tr>
</thead>
</table>

Query Code

function addrow() {

        var t = $('#Task_Item').DataTable();
        t.row.add([
            '<input type="text" class="form-control form-control-sm border-success rounded-0" value="" />',
            '<input type="text" class="form-control form-control-sm border-success rounded-0" value=""/>',
        ]).draw();
    }

   function Save()
   {
       var Task = [];
        var dataTable = $('#Task_Item').DataTable().rows().Data();
        $(dataTable).each(function () {

            Task.push({
                "Id": $(this[0]).val(),  // No View value
                "Name": $(this[1]).val() // No View value
            })

            alert($(this[0]).val());
        }
        )

    }