JSFiddle - React, Tailwind, and code Playground

HTML

<input id="iprcount" type="number"> &nbsp; <input id="ipccount" type="number">
    <button id="ci">Create IP</button> 
 <div id="box">

 </div>

CSS

body{
  width: 100%; overflow: auto;
}

  #basicTable {
    position: absolute;
  }

JavaScript

var buttonWC = $("#wc");
var buttonCI = $("#ci");
var inputwr = $('#rcount');
var inputwc = $('#ccount');
var inputir = $('#iprcount');
var inputic = $('#ipccount');

function createInsideTable(iprcount,ipccount) {
var tdip = {
   'TileHt': 40,
   'TileWd': 400
 };
    
   
  
    mydiv = $('<div>').attr({ id: "innerdiv" });

    mytable = $('<table>',{
        "id":"innerip",
        "title":"IP",
        "class":"inneriptable",
        "width":ipccount*tdip.TileWd,
        "height":iprcount*tdip.TileHt
    });
    
    var color = 'rgba(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',.8)';
  
    for (var i = 0; i < iprcount; i++) {
        var row = $('<tr></tr>').appendTo(mytable);
        for (var j = 0; j < ipccount; j++) {
            $('<td></td>').css({'background-color': color, 'height':tdip.TileHt+'px','width':tdip.TileWd+'px'}).appendTo(row); 
        }
    }
    mytable.appendTo(mydiv);
    mydiv.appendTo("#box");

$( "#box div#innerdiv" ).draggable({ cursor: "move", grid: [ 40, 40 ] });
  }

buttonWC.click(function () {
    var inputValue4 = inputwr.val();
    var inputValue1 = inputwc.val();
    createCanvas(inputValue4,inputValue1);
});

buttonCI.click(function () {
    var inputValue2 = inputir.val();
    var inputValue3 = inputic.val();
    createInsideTable(inputValue2,inputValue3);
});