<div class="content">
  <div class="container-fluid">

    <div class="row">
      <div class="col-lg-12">
        <div class="card card-primary card-outline">
          <div class="card-body">
            <div id="quest">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- JavaScript Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
.btn-success:hover {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

div.ui-droppable-disabled.divslot {
  background-color: #28a745;
}

div.divslot {
  border: 1px solid #3c8dbc;
}

.content {
  margin-top: 50px;
}
/* .......... */
.mr-1,
.ml-1 {
  margin: 1rem 0;
}
.mr-1.divslot {
  flex: 1 0 0%;
  border: dashed 1px;
  white-space: nowrap;
  min-height: 31px;
}
.mr-1.divslot.isDropped {
  max-width: min-content;
}
.ui-draggable-dragging {
  border: 1px dotted red;
}
.ui-draggable-disabled {
  border: 1px dotted #000;
  width: 10%;
}
$(function () {
  var correctCards = 0;

  var stringtext = [
    [
      "Is",
      "there",
      "any",
      "chance",
      "you'd",
      "be",
      "interested in a",
      "movie",
      "tonight",
      "?"
    ]
  ];
  var label = [
    [
      "Is",
      "tonight",
      "there",
      "interested in a",
      "be",
      "you'd",
      "movie",
      "chance",
      "any",
      "?"
    ]
  ];

  $(init());

  function init() {
    correctCards = 0;
    $("#cardPile").html("");
    $("#cardSlots").html("");

    for (var x = 0; x < stringtext.length; x++) {
      var numdiv = x;
      var divs = "#cardPile_" + numdiv + " div";

      $("#quest").prepend(
        $('<div class="row mb-auto pb-1" id="row_' + numdiv + '"></div>')
      );

      $("#row_" + numdiv).prepend(
        $(
          '<div class="col-lg-6 d-flex flex-row" id="cardSlots_' +
            numdiv +
            '"></div>'
        )
      );
      for (var i = 0; i < 10; i++) {
        $('<div class="ml-1 mr-1 divslot"></div>')
          .data("number", stringtext[x][i])
          .appendTo("#cardSlots_" + numdiv)
          .droppable({
            accept: divs,
            hoverClass: "hovered",
            drop: handleCardDrop
          });
      }

      $("#row_" + numdiv).prepend(
        $(
          '<div class="col-lg-6 d-flex flex-row" id="cardPile_' +
            numdiv +
            '"></div>'
        )
      );
      for (var i = 0; i < 10; i++) {
        $(
          '<div class="ml-1"><button type="button" class="btn  btn-primary btn-sm">' +
            label[x][i] +
            "</button></div>"
        )
          .data("number", label[x][i])
          .attr("id", "card " + label[x][i])
          .appendTo("#cardPile_" + numdiv)
          .draggable({
            stack: divs,
            cursor: "move",
            revert: true,
            cancel: false
          });
      }
    }
  }

  function handleCardDrop(event, ui) {
    var slotNumber = $(this).data("number");
    var cardNumber = ui.draggable.data("number");

    ui.draggable.find("button").addClass("btn-success");
    ui.draggable.find("button").attr("title", cardNumber);
    $(this).addClass("isDropped");
    ui.draggable.draggable("disable");
    $(this).droppable("disable");
    ui.draggable.find("button").appendTo($(this));
  }
});
Run Pen

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css
  2. https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

External JavaScript

This Pen doesn't use any external JavaScript resources.