How do I export my table containing date inputs to excel without rendering the inputs unusable afterwards?

The issue is, I've hacked together a way to take a table I'm using that has date inputs and export it to excel by essentially replacing it with text. The issue is, that means that after the table is exported, the inputs are gone, and the entire table is effectively rendered unusable. I'd like to find a way to change the way I'm doing this process to avoid this happening. Below is the function I have currently. To clarify again, I understand why this is happening, I am simply looking for the cleanest way to modify what I am doing so as to keep my inputs usable after exporting, be it changing how I handle the inputs, how I export the table, or both.

function fnExcelReport(){
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('thetable'); // id of table

$('table td:has(input[type!="hidden"])').each(function () {
$(this).html($('input[type!="hidden"]', this).val());
 });

for(j = 0 ; j < tab.rows.length ; j++) 
{     
    var testing = tab.rows[j].innerHTML;
    tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
    //tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";

var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE "); 

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
{
    txtArea1.document.open("txt/html","replace");
    txtArea1.document.write(tab_text);
    txtArea1.document.close();
    txtArea1.focus(); 
    sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}  
else                 //other browser not tested on IE 11
    sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  

return (sa);
}

And below I've copied what any given row might look like.

<tr>
<td class="text-center" style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;">text</td>
<td class="text-left" style="border-left: 1px solid #000 !important;border-right: 1px solid #000 !important;padding-left:1.5em !important;">text</td>

<td style="padding-left:1.5em !important;">
<div class="input-group date">
<input Name="inputname" class="form-control" id="thisinput" name="this" readonly="true" type="date" value="" />
</div>
</td>
<input Name="hiddeninput" Value="2" id="thishiddeninput" name="name" type="hidden" value="2" />                                                            <td></td>
</tr>

If any further information is needed, I am glad to provide. Thank you in advance.

EDIT 1: Adding further attempt. I'm currently thinking that the easiest way to do this would be to somehow, after exporting the table, reverse the process I've done with the two lines of Jquery and turn the plain text back into inputs. However, some browsing online makes me think this might be impossible, and I certainly lack the knowledge to know how that would be done, nor am I even sure its a one-stop solution to the problem.

(never mind, after export process, the td containing the inputs literally becomes:

<td>style="padding-left:1.5em !important;">2022-03-10</td>

obviously trying to turn that back into an input with the correct attributes is impossible.)