Saving Values from a Dynamically Generated <td> to a List

Question

I have pulled some values from an API which I have populated in a table. On each table row I have dynamically added a save button. I simply want to use the save button to save one value in a table cell (the first) to a list which will then either be saved to local storage or a database.

Here is my code:

jQuery(function ($) {
        $(document).on('click', '#save-btn', function () {
            console.log("Clicked!");
            mytr = $(this).closest("tr"), 
                mytd = mytr.find("td:first-child");
            $.each(mytd, function () {
                console.log($(this).text());
                $('.saved-list').append(`'<li>'`+mytd+`'</li>'`); 
            });
        });
    });

I can output to the console correctly, but I can't append the value to my list. I'm getting:

[object Object]

Hopefully this is enough information to assist me.

Answer 1

instead of

$('.saved-list').append(`'<li>'`+mytd+`'</li>'`); 

Do:-

$('.saved-list').append(`'<li>'`+$(this).text()+`'</li>'`); 

Note:- You need to add text there while you are adding object there.( mytd is object not text)