JSFiddle - React, Tailwind, and code Playground

by Sunny Jain

HTML

<button onclick="createTable()">Create Table</button>
		<div class="tablecontainer">
			
		</div>
		<button onclick="saveData()">Save</button>
		<br />
		<div class="container"></div>

CSS

table, th, td {
			border: 1px solid #ddd;
			border-collapse: collapse;
			padding: 10px;
		}

		.parent {
			height: 25%;
			width: 90%;
			padding: 1%;
			margin-left: 1%;
			margin-top: 1%;
			border: 1px solid black;
		}

		.parent:nth-child(odd){
			background: skyblue;
		}

		.parent:nth-child(even){
			background: green;
		}

JavaScript

function createTable(){
			var content = "";

			 $.getJSON("https://api.randomuser.me/?results=25", function(data) {
				content += '<table><tr><th>Select</th><th>Name</th><th>DOB</th></tr>'

				for(var i=0;i < data.results.length ; i++ ){
					var dataFromJSON = encodeURIComponent(JSON.stringify(data.results[i]));
					content += '<tr><td><input type="checkbox" name="selectRow" value="'+dataFromJSON+'"></td><td><a href="'+data.results[i].picture.thumbnail+'" class="imgurl" target="_blank">'+ data.results[i].name.first + '</a></td><td>'+ data.results[i].dob +'</td></tr>';
				}
				content += '</table>'
				$('.tablecontainer').html(content);


			}).fail(function(error) {
				console.log("**********AJAX ERROR: " + error);
			});
					
		}
      
      function saveData(){
			// Scrape the URLs that were already collected into a Set:
			var used = new Set($('.myLink').map(function () {
				return $(this).attr('href');
			}).get());
			var errors = [];
			$('tr:has(input.selectRow:checked)').each(function(count) {
      var dataFromJSON =  JSON.parse(decodeURIComponent(this.value)); 
      var keyedData = dataFromJSON.reduce(function (keyedData, entry) {
				return keyedData.set(entry.weburl, entry);
			}, new Map); // Start reducing with empty Map
      
				// Scrape the weburl from the checked row
				var weburl = $('.weburl a', this).attr('href');
				// Get the other properties from the data map:
				var obj = keyedData.get(weburl);
				// See if this URL was already collected (that's easy with Set)
				if (used.has(obj.weburl)) {
					errors.push(obj.name);
				} else {
					// Append it to the collection (use jQuery for appending)
					$('.container').append(
						$('<div>').addClass('parent').append(
							$('<label>').addClass('dataLabel').text('Name:'),
							obj.name,
							$('<br>'), // line-break between name & website
							$('<label>').addClass('dataLabel').text('Website:'),
							$('<a>').addClass('myLink').attr('href',...