JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://threedubmedia.googlecode.com/files/jquery.event.drag-1.5.min.js"></script>
<div id="infodiv"> </div>
<div class="circles" id="main"> </div>

CSS

.circles{
            border-radius: 10px;
            width:20px;
            height:20px;
            position:absolute;
            background-color:rgba(100,100,100,0.5);
        }

        .wall{
            width:10px;
            height:10px;
            position:absolute;
            background-color:rgba(20,20,180,0.5);
        }

        #main{
            background-color: rgba(200,30,30,0.5);
        }

        #infodiv{
            position: absolute;
            width: 10%;
            height: 10%;
            top:2%;
            left:45%;
            background-color:rgba(100,100,100,0.2);
            color: red;
        }

JavaScript

$().ready(function() {
    var height = $(window).height();
    var width = $(window).width();

    nodeList = [];
    walls = [];
    steps = 1000;
    currStep = 0;
    var timeStep = 30;
    nodeNum = parseInt(window.prompt("Number of nodes?", "10"));

    vert = 20;
    horz = parseInt(vert * width / height);

    function Node(x, y, fx, fy, charge, id) {
        this.x = x;
        this.y = y;
        this.vx = 0;
        this.vy = 0;
        this.fx = fx;
        this.fy = fy;
        this.id = id;
        this.charge = charge;
        if (id != "") {
            $("#" + id).css({
                left: parseInt(x) + "px",
                top: parseInt(y) + "px"
            });
            if ($("#" + id).hasClass("circles")) {
                $("#" + id).css({
                    width: (width + height) *Math.exp(-nodeNum/30)/7,
                    height:  (width + height) *Math.exp(-nodeNum/30)/7,
                    "border-radius":  (width + height)*Math.exp(-nodeNum/30)/14
                });
            }
        }

        this.disp = function() {
            $("#" + this.id).css({
                left: this.x-$("#" + this.id).width()/2 + "px",
                top: this.y-$("#" + this.id).width()/2 + "px"
            });
        }
    }

    function randX() {
        return width / 10 + Math.random() * width * 8 / 10;
    }

    function randY() {
        return height / 10 + Math.random() * height * 8 / 10;
    }

    function calcF(node1, node2) {
        var dx = node1.x - node2.x;
        var dy = node1.y - node2.y;
        var d = Math.sqrt(dx * dx + dy * dy);
        var dir;

        if (node1.charge == 0 || node2.charge == 0) {
            if (node2.charge + node1.charge > 0) dir = 150;
            else dir = 80;
            dir = dir * (vert * horz) / (nodeNum * (width + height))
            fext = 0;
        } else {
            //fext = -1*(d-100); 
            //fext = -1*(d-width/4-height/4)*0.0008; 
            //dir = node1.charge *...