JSFiddle - React, Tailwind, and code Playground

by Amit Sant

HTML

<table>
		<tr>
			<th>Name</th>
			<th>Cookies</th>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
		<tr>
			<td><input type="text" class="nameField"></td>
			<td><input type="number" class="cookieField"></td>
		</tr>
	</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";	
		}
		alert(csv);
		
		$link.attr("href", 'data:Application/octet-stream,' + encodeURIComponent(csv))[0].click();
	});
});