JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-primary plus-icon" data-bs-toggle="modal" data-bs-target="#AddValue">
  Launch demo modal
</button>

<table class="custom-style" id="bottom_table">
  <thead class="table-head">
    <tr>
      <th class="sorting_disabled">Some value</th>
      <th>Some value</th>
      <th>Some value</th>
      <th>Some value</th>
      <th class="sorting_disabled">Actions</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td>
        Some data
      </td>
      <td>
        Some data
      </td>
      <td>
        Some data
      </td>
      <td>
        Some data
      </td>
      <td>
        <button type="button" class="btns raised grey centered-text" id="openDetailsModal">Details</button>
      </td>
    </tr>
  </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="AddValue" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">@Localizer["Production order details"]</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form asp-action="LoadOrders" asp-controller="ProductionOrderManagement" asp-antiforgery="true" method="post">
        <div class="modal-body">
          <div class="form-group">
            <div class="input-group mb-3">
              <select class="form-control select2 remove-pading" id="productionResources" data-live-search="true">
                <option selected></option>
                <option value="productionPlant">@Localizer["Production plant"]</option>
      ...

JavaScript

$(".plus-icon").click(function () {
    setTimeout(function () { 
        $('#openDetails').modal('hide');
      
        $('.modal').modal();
    }, 600);
});


$("#openDetailsModal").on("click", function () {
    $('#openDetails').modal('show');
});