JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>
      <center>
        <table>
          <tr>
            <td>
              <div class='match_round' id='w1'>
                <div class='make-draggable' id='go-l1'>
                  Test P1
                </div>
                <div class='vs'>
                  <center>
                    vs.
                  </center>
                </div>
                <div class='make-draggable' id='go-l-1'>
                  Test P2
                </div>
              </div>
              <br>
              <div class='match_round' id='w2'>
                <div class='make-draggable' id='go-l2'>
                  Test P3
                </div>
                <div class='vs'>
                  <center>
                    vs.
                  </center>
                </div>
                <div class='make-draggable' id='go-l-2'>
                  Test P4
                </div>
              </div>
              <br>
              <div class='match_round' id='w3'>
                <div class='make-draggable' id='go-l3'>
                  Test P5
                </div>
                <div class='vs'>
                  <center>
                    vs.
                  </center>
                </div>
                <div class='make-draggable' id='go-l-3'>
                  Test P6
                </div>
              </div>
              <br>
              <div class='match_round' id='w4'>
                <div class='make-draggable' id='go-l4'>
                  Test P7
                </div>
                <div class='vs'>
                  <center>
                    vs.
                  </center>
                </div>
                <div class='make-draggable' id='go-l-4'>
                  Test P8
                </div>
              </div>
            </td>
            
            
            <td>
              &nbsp;&nbsp;
            </td>
            
            <td>
              <div class='match_round-drop'...

CSS

.draggable {
    cursor: move;
    font-size: 11px;
    width: 70px;
    border-style:solid;
    border-width: 1px 1px 1px 1px;
}
.make-draggable {
    cursor: move;
    font-size: 11px;
    width: 70px;
    border-style:solid;
    border-width: 1px 1px 1px 1px;
    z-index:2700;
}
#dropbox {
    width: 100px;
    height: 100px;
    background: gray;
}
.match_round-drop {
    width: 70px;
}

JavaScript

$(".make-draggable, .draggable").draggable({
    helper: "clone",
    snap: ".draggable",
    snapMode: "inner"
});
$(".draggable").droppable({
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
        var elemText = ui.draggable.text();
        $(this).html(elemText);
        var outB = ui.draggable.attr('id').split("-");
        if (outB[0] == "go") {
            var num = outB.length;
            var loser;
            var loserval;
            var losloc;
            var losid = outB[1];
            if (num === 2) {
                loser = (losid.charAt(0) + "-" + losid.charAt(1));
                loserval = $("#go-" + loser);
                losloc = ("#"+losid);
            } else if (num === 3) {
                loser = (outB[1] + outB[2]);
                loserval = $("#go-" + loser);
                losloc = ("#"+loser);
            } else if (num === 4) {
                loser = (outB[1]+outB[2]+outB[3]);
                loserval = $("#go-" + loser);
                losloc = ("#"+loser);
            } else if (num === 5) {
                loser = (outB[1]+outB[2]+outB[3]+outB[4]);
                loserval = $("#go-" + loser);
                losloc = ("#"+loser);
            }
            $(losloc).html(loserval.text());
        }
    }
});