JSFiddle - React, Tailwind, and code Playground

HTML

<input id="WarehouseRefex" name="WarehouseRefex" value="LRS.G" type="hidden">
<input id="WarehouseId" name="WarehouseId" value="7" type="hidden">



<div class="container_16">
    <div class="grid_16">
        
        <ul class="nav main">
            <li class="icon"><a title="Entrada" href="/"><span class="ui-icon-invert ui-icon-home"></span></a></li>
            
            <li><a href="">Transporte</a>
                
                <ul>
                    
                    <li><a href="/bookings/events?s.Today=true&amp;s.Top=20">Tracking</a></li>
                    
                    <li><a href="/planning">Planeamento</a></li>
                    
                    <li><a href="/bookings?s.Today=true">Ordens de Serviço</a></li>
                    
                    <li><a href="/rangesheets?s.Today=true">Folhas de Serviço</a></li>
                    
                    <li><a href="/dispatchnotes?s.Today=true">Guias de Remessa</a></li>
                    
                    <li><a href="/expeditions?s.Today=true&amp;s.IntegrationState=0">Expedições</a></li>
                    
                    <li><a href="/expeditionsPlanning">Planeamento Expedição</a></li>
                    
                    <li><a href="/resourceallocation">Alocação de Recursos</a></li>
                    
                    <li><a href="/planningvseffective">Análise de Desvios</a></li>
                    
                    <li><a href="/DeliveryNoteImagingControl?s.Today=true&amp;s.Images=">Controlo de Dig. de GR's</a></li>
                    
                    <li><a href="/RangeSheetControl?s.Today=true">Controlo de Serviços</a></li>
                    
                </ul>
            </li>
            
            <li><a href="">Armazém</a>
                
                <ul>
                    
                    <li><a href="/goods/events?s.Top=20">Tracking</a></li>
                    
                    <li><a...

CSS

#ajax-loader { position: absolute; padding: 10px; }
#ajax-loader span { background-image: url("../images/ajax-loader.gif"); width: 32px; height: 32px; display: block; }

.wz-flat
{
    fill: red;
    cursor: pointer;
    cursor: hand;
}
.wz-rack
{
    cursor: pointer;
    cursor: hand;
}
.maxHeightSet
{
    display: block;
    clear:both;        
    width: auto;
    max-height: 400px;        
    padding-right:50px;
    padding-left:50px;
}   
.noBullet
{
    list-style-type: none;
    margin-left: 0px;
}

JavaScript

$(function() {
    Racks.init('/warehouses/RackLocationsView/7?zoneId={0}', '/warehouses/RackLocationsEdit/7?zoneId={0}', '/warehouses/RackLocationsEpl2/7?zoneId={0}&lids={1}');
});

function createPopupLocation(lid, position) {
    var url = '/Warehouses/OnLidGoods?lid=-p-'.replace("-p-", lid);

    $.ajax({
        type: "GET",
        cache: false,
        url: url,
        async: false,
        success: function(data) {

            goods = JSON.parse(data);
            var header = "";
            if (goods.length > 0) {
                header = String.format("<h3>Na posição <b>{0}</b> existe{2} {1} mercadoria{3}:</h3>", position, goods.length, (goods.length > 1 ? "m" : ""), (goods.length > 1 ? "s" : ""));
            }
            else {
                header = String.format("<h3>Não existem mercadorias na posição <b>{0}</b> .</h3>", position);
            }

            var html = header;
            html += "<ul>";
            for (var i = 0; i < goods.length; i++) {
                html += String.format("<li><a href='../../Goods/Details/{0}'>{0}</a></li>", goods[i]);
            }
            html += "</ul>";

            var div = "<div class='locationPopup'>-p-</div>".replace("-p-", html);

            $("body").append(div);

            var divSelect = $("div[class='locationPopup']");

            divSelect.dialog({
                title: lid,
                autoOpen: false,
                modal: true,
                width: 'auto',
                height: 'auto',
                resizable: true,
                close: function(ev, ui) {
                    $(this).hide();
                    $(this).remove();
                }
            });

            divSelect.show();
            divSelect.dialog("open");
        }
    });
}

/* Função de criação e formatação da Dialog Window */

function closeDialogWindow() {
    $myWindow.find('h3').remove();
    $myWindow.find('.racksTable').remove();
    $myWindow.find('.TableFlat').hide();
   ...