JSFiddle - React, Tailwind, and code Playground

HTML

<table>
		<tbody><tr>
			<th>Name</th>
			<th>Cookies</th>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
		<tr>
			<td><input class="nameField" type="text"></td>
			<td><input class="cookieField" type="number"></td>
		</tr>
	</tbody></table>
<p>
<button id="downloadLink">Download CSV</button>
<a href="" id="dataLink" download="data.csv"></a>
</p>

JavaScript

$(document).ready(function() {
    var $link = $("#dataLink");
    var $nameFields = $(".nameField");
    var $cookieFields = $(".cookieField");
    
    $("#downloadLink").on("click", function(e) {
        var csv = "";
        //we should have the same amount of name/cookie fields
        for(var i=0; i<$nameFields.length; i++) {
            var name = $nameFields.eq(i).val();
            var cookies = $cookieFields.eq(i).val();
            if(name !== '' && cookies !== '') csv += name + "," + cookies + "\n";    
        }
        console.log(csv);
        
        $link.attr("href",'data:Application/octet-stream,'+encodeURIComponent(csv));
        fakeClick($link[0]);
    });
});



$(document).ready(function() {
    var $link = $("#dataLink");
    var $nameFields = $(".nameField");
    var $cookieFields = $(".cookieField");
    
    $("#downloadLink").on("click", function(e) {
        var csv = "";
        //we should have the same amount of name/cookie fields
        for(var i=0; i<$nameFields.length; i++) {
            var name = $nameFields.eq(i).val();
            var cookies = $cookieFields.eq(i).val();
            if(name !== '' && cookies !== '') csv += name + "," + cookies + "\n";    
        }
        console.log(csv);
        
        $link.attr("href",'data:Application/octet-stream,'+encodeURIComponent(csv)).click();
        
        //fakeClick($link[0]);
    });
});

function fakeClick(anchorObj) {
  if (anchorObj.click) {
    anchorObj.click()
  } else if(document.createEvent) {
    if(event.target !== anchorObj) {
      var evt = document.createEvent("MouseEvents"); 
      evt.initMouseEvent("click", true, true, window, 
          0, 0, 0, 0, 0, false, false, false, false, 0, null); 
      var allowDefault = anchorObj.dispatchEvent(evt);
      // you can check allowDefault for false to see if
      // any handler called evt.preventDefault().
      // Firefox will *not* redirect to anchorObj.href
      // for you. However every other browser...