JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script src="jquery.js"></script>
<script>
$(function () {
// Page Load
//// Set default size of canvas
var canvas_height = 124;
var canvas_width = 124;
//// Set starting point and first option point
$('#canvas div:first-child').addClass('start');
$('#canvas div:nth-child(2)').addClass('option');
GenerateIDs();
$('#btnID').click(function(){
GenerateIDs();
});
// Generates IDs dynamically
function GenerateIDs(){
var row = 0;
var col = 0;
var lastdivposition = 0;
$('#canvas div').each(function(){
if ($(this).position().top > lastdivposition)
{
row += 1;
col = 1;
}
else
col += 1;
$(this).attr('id', row + '-' + col);
lastdivposition = $(this).position().top
});
}
$('.option').click(function(){
if($(this).attr('id').split('-')[0] != $(this).next().attr('id').split('-')[0])
{
$('.option').each(function(){
$(this).removeClass('option');
});
AddDivs('c')
GenerateIDs();
$(this).removeClass('option').removeClass('blank').addClass('object');
//$(this).next().addClass('option');
$('.object').each(function(){
if($('#' + $(this).attr('id').split('-')[0] + '-' + (parseInt($(this).attr('id').split('-')[1]) + 1)).hasClass('blank'))
$('#' +...