how can i get the value/text of an input field embedded in a column(td) ?

how can i get the value/text of an input field embedded in a column(td) ?

hi, i have tried searching around about this topic but i couldnt find solutions so far.
here is my problem, initially i have a table with only tds, when one clicks the edit button, all contents are turned into input fields but with the table contents reserved, now i am trying to get the content of the input fields when one clicks the save button. 

below is the initial table code:


<table border="1" cellpadding="1" cellspacing="2" id="mytable">

    <tr>
        <th>Title</th>
        <th>Genre</th>
        <th>Comment</th>
        <th>
            <button class="anime-add btn btn-success">Add</button>
        </th>
    </tr>

    @foreach (var anime in Model)
    {
        <tr class="anime" data-id="@anime.AnimeId">
            <td class="anime-title" data-id="@anime.Title">@anime.Title</td>
            <td class="anime-genre" data-id="gen">@anime.Genre</td>
            <td class="anime-comment" data-id="com">@anime.Comment</td>
            <td>
                <button class="anime-edit btn btn-info">Edit</button>
                <button class="anime-delete btn btn-danger">Delete</button>
            </td>
        </tr>
    }
</table>

below is my edit function:

@section scripts{
    <script>
        $('body').on('click', 'button.anime-edit', function () {
            var row = $(this).closest('tr.anime');
            var anime_id = row.attr('data-id');

            row.children(':not(:last-child)').each(function (index, element) {
                var $element = $(element);
                $element.html('<input value="' + $element.text() + '">');
            });

            row.children().last().html('<button class="anime-save btn btn-primary">Save</button><button class="anime-cancel btn btn-warning">Cancel</button>');
        });

$('body').on('click', 'button.anime-save', function (repsonse) {
            var row = $(this).closest('tr.anime');
            var anime_id = row.attr('data-id');


            //var anime_tit = row.children().attr('data-id');   /// this one gives me the right title but i dont know how                                                                               //to get others
            //alert(anime_tit);

            var anime_tit = $(this).closest('td.anime-title').children().val();
            alert(anime_tit);

            console.log(anime_tit );
          

        });

</script>

thanks to you all in advance for any help