JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<img id="streamline1" src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" />
<img id="LAN" src="https://cdn1.iconfinder.com/data/icons/ecqlipse2/NETWORK%20-%20LAN.png" />
<img src="https://cdn3.iconfinder.com/data/icons/streamline-icon-set-free-pack/48/Streamline-04-48.png" id="streamline" />
<div id="mid"></div>
<div id="bottom"></div>
<p>&nbsp;</p>
<div>Speed (mS):
    <input value="1000" id="speed" type="number" style="position: relative"></input>Slow Start Threshold:
    <input value="8" id="ssth" type="number" style="position: relative"></input>
    <button>Apply!</button>
    <p>&nbsp;</p>
    <div>Current window size:
        <div id="window_size" style="color: green;font-weight:bold;display:inline-block">1</div>
    </div>
    <!-- dynamic area -->
    <div class="packets"></div>
</div>
<p>&nbsp;</p>
<div id="table" class="table">
    <div id="window" class="window"></div>
</div>
<p>&nbsp;</p>

CSS

.window {
    width: 20px;
    height: 20px;
    position: fixed;
    left: 0px;
    outline: brown solid medium;
}
.table {
    height: 20px;
    position: fixed;
    left: 20px;
    outline: black solid none;
}
.cell {
    width: 20px;
    height: 20px;
    left: 50px;
    position: fixed;
    outline: black solid;
}
#bottom {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 30px;
    z-index=-1;
}
#mid {
    border: 1px dashed gray;
    position: absolute;
    left: 55px;
    height: 20px;
    width: 500px;
    opacity: 0.5;
    top: 10px;
    z-index=-1;
}
.t {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 60px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-color: lightgreen
}
#streamline {
    width: 50px;
    height: 50px;
    right: 0px;
    position: fixed;
    left: 550px;
}
#streamline1 {
    left: 0px;
    width: 50px;
    height: 50px;
}
#LAN {
    width: 50px;
    height: 50px;
    left: 275px;
    position: fixed;
}
.packets {
    display: inline;
}
.inline {
    display:inline-block;
    width:18px;
    height:18px;
    border:1px solid;
    text-align:center;
}

JavaScript

var count = 0;
var items = 0;
var packetNumber = 0;
var speed = 0;
var ssth = $("#ssth").val();
var window_left = 0;

for (var i = 1; i <= 32; i++) {
    $('#table').append("<div class='inline' id='" + i + "'>" + i + "</div>");
}
document.getElementById(1).style.width = 22;

$("button").click(function () {
    if (items < ssth) {
        if (items == 0) items = 1;
        else items = items * 2;
        count++;
    } else {
        items = items + 1;
    }

    window_left += 20;
    window_width = items * 20;

    document.getElementById("window_size").innerHTML = items;
    document.getElementById("window").style.left = window_left + "px";
    document.getElementById("window").style.width = window_width + "px";

    speed = +$("#speed").val();
    createDivs(items);
    animateDivs();
});

function createDivs(divs) {
    packetNumber = 1;
    var left = 60;
    for (var i = 0; i < divs; i++) {
        var div = $("<div class='t'></div>");
        div.appendTo(".packets");
        $("<font class='span'>" + (parseInt(packetNumber) + parseInt(window_left / 20) - 1) + "</font>").appendTo(div);
        packetNumber++;
        div.css({
            left: left
            /* opacity: 0*/
        }).fadeOut(0);

        //div.hide();
        //left += 20;
    }
}

function animateDivs() {
    $(".t").each(function (index) { // added the index parameter
        var packet = $(this);

        packet.delay(index * 200)
            .fadeIn(200, function () {
            $('#table #' + (index + window_left / 20)).css({
                background: 'yellow'
            });
        })
            .animate({
            left: '+=230px'
        }, speed)
            .animate({
            left: '+=230px'
        }, speed)
            .fadeOut(200, function () {
            packet.css({
                top: '+=20px',
                backgroundColor: "#f09090"
            })
                .text('a' + packet.text());
        })
            .delay(500)
            .fadeIn(200)
  ...