JSFiddle - React, Tailwind, and code Playground

HTML

<table cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Iterations</th>
            <th>Even Amt</th> <!-- # of points to see even distribution -->
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
            <th>10</th>
            <th>11</th>
            <th>12</th>
            <th>13</th>
            <th>14</th>
            <th>15</th>
            <th>16</th>
            <th>17</th>
            <th>18</th>
            <th>19</th>
            <th>20</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
<input type="text" /><button>Calculate</button>

CSS

td{
    margin:5px 0;
    padding: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}

JavaScript

var $tbody = $('tbody'),
    $input = $('input'),
    $btn = $('button'),
    range = {
        min:1,
        max:20
    },
    arr = [];

for(var j = 0; j < range.max; j++){
  arr.push(0);
}

$btn.on('click', doIterations);

function doIterations(e){
   e.preventDefault();
   
    var i = parseInt($.trim($input.val()),10),
        eD = i/range.max,
        tArr = arr.slice(0),
        $row = $('<tr />');
    
    $row.append('<td>'+i+'</td><td>'+eD+'</td>');
    
    while(i--){
        tArr[getRandomInt(range.min,range.max)-1]++;
    }
    
    for(var k = 0, n = tArr.length; k < n; k++){
        $row.append('<td>'+tArr[k]+' ('+((tArr[k]-eD)/eD*100).toFixed(2)+'%)</td>');
    }
    $tbody.append($row);    
}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}