JSFiddle - React, Tailwind, and code Playground

HTML

<input id="number" type="text" value="5" />
<button id="main" onclick="bigActionHere();">Click Me!</button>
<div id="table_holder"></div>

CSS

.prime {
    background-color: #111;
    color: #fff;
}

JavaScript

function inArray(needle, haystack) {
    var length = haystack.length;
    for (var i = 0; i < length; i++) {
        if (haystack[i] == needle) return true;
    }
    return false;
}

function findPrime(num) {
    var output = [];
    for (j = 2; j <= num; j++) {
        for (k = 2; k < j; k++) {
            if (j % k === 0) {
                break;
            }
        }
        if (k === j) {
            output.push(j);
        }
    }
    return output;
}

function bigActionHere() {
    var table_holder = document.getElementById('table_holder'),
        n = document.getElementById('number').value,
        k = 1,
        primes = findPrime(n * n),
        content = '';
    console.log(primes);
    content = '<table cols="' + n + '" rows="' + n + '" border="1">';
    for (i = 0; i < n; i++) {
        content += '<tr>';
        for (j = 0; j < n; j++) {
            content += '<td' + (inArray(k, primes) ? ' class="prime">' : '>') + k + '</' + 'td>';
            k++;
        }
        content += '</tr>';
    }
    content += '</table>';
    table_holder.innerHTML = content;
}