Adding Class to the inserted rows

AGSHAR

Hello
I was looking for answer in the forum for the problem, I have a table

<table class="table table-bordered">
    <tr>
        <th>
            Name
        </th>
        <th>
            Value
        </th>
    </tr>
    @for (int i = 0; i < 10; i++)
    {
        <tr>
            <td class="Name">
                Name @i
            </td>
            <td class="Value">
                Value @i
            </td>
        </tr>
    }
</table>

and I am passing its value to the controller using

 var arr = [];
        $('.Name').each(function () {
            var nam = $(this).text().trim();
            var val = $(this).siblings('.Value').text().trim();
            arr.push({ Name: nam, Value: val });
        });

and then posting it using

$.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/HomeController/Values",
                data: JSON.stringify(arr),
                dataType: "json",
                success: function (response, data) {
                    alert(response.someValue);
                },
                error: function (err) {
                }
            });
 

It is working fine with above code,

I was trying to implement the same in the datatable
but I think I need to add class name for each columns, I did the following

function addROWS() {
        var t = $('#datatable').DataTable();
        {
            t.row.add([
                document.getElementById("Name").value,
                document.getElementById("Value").value,
            ]).draw()
                .node();

             $(t).find('td').eq(0).addClass('Name');
             $(t).find('td').eq(1).addClass('Value');
            

        }
    }

my html table

 <input type="button" id="StartButton" value="Add New Row" onClick="addROWS()">

    <table id="datatable" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
               
            </tr>
            <tr>
                <th><input type="text" value="ali" id="Name" /></th>
                <th><input type="text" value="ahmad" id="Value" /></th>
              

            </tr>
        </thead>
 
        <tbody></tbody>
 
        
    </table>

This didn't work, I am receiving Null values.

any idea?

AGSHAR

I ddin't add my html table

<input type="button" id="StartButton" value="Add New Row" onClick="addROWS()">

<table id="datatable" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>

        </tr>
        <tr>
            <th><input type="text" value="ali" id="Name" /></th>
            <th><input type="text" value="ahmad" id="Value" /></th>


        </tr>
    </thead>

    <tbody></tbody>


</table>