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>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
		<script>

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;
		}
		
		.dataLabel {
			margin: 1%;
			padding: 1%;
		}

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="imgLink" 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);
			});
					
		}
		
				var content = "";
                dispUrl = [];
                function saveData(){


                $('input[name="selectRow"]:checked').map(function(count) {
                    var myJSON =  JSON.parse(decodeURIComponent(this.value));
                    var tableDataUrl = myJSON.weburl;
                    content += '<div class="parent"><label class="dataLabel">DOB:</label>'+myJSON.dob+'<br /><label class="dataLabel">Name:</label><a href="'+myJSON.picture.thumbnail+'" class="myLink"></div>';

                    $('.parent .myLink').each(function() {
                       dispUrl.push($(this).attr('href'));
                     });

                    //console.log(linkArr);

                var isRendered = $.inArray(tableDataUrl, dispUrl);
                //alert(isRendered);

                  if(isRendered) { 
                    $('.container').html(content);
                    
                  } else {
                    alert("Div already added to the result list!");
                  }  

             });

            }