jQuery dynamically replaces the input input box created. The original intention is to replace the original td column with a td column with input. I want to retain the values ​​​​in the original column into the replaced input input box, and all the values ​​​​can be obtained. The input box can also be replaced, but this value cannot be saved. Please ask God to solve it. Thank you! !

function edit(obj){
            var id = $(obj).parent().prev().prev().prev().prev().prev().html();
            var tab1 = $(obj).parent().prev().prev().prev().prev().html();
            var tab2 = $(obj).parent().prev().prev().prev().html();
            var tab3 = $(obj).parent().prev().prev().html();
            var tab4 = $(obj).parent().prev().html();
            for(var i = 1;i < 5;i++){
                $(obj).parent().parent().children().eq(i).replaceWith("<td><input type='text'/></td>");
                $(obj).parent().parent().children().eq(i).val("12");
                // $(obj).parent().parent().children().eq(i).html("12");
            }

I want to replace the values ​​of tab1, 2, 3, and 4 with tabi and assign them in a loop. But it has never worked, and the one commented at the end does work. . .