Bootstrap modal not showing with JavaScript " $("#attributeUpdateModal").modal('show');"

Question

I am new to JavaScript and I'm working on a project with openlayers and geoserver and I need to add features to a layer. I succeeded to draw a feature but for saving it I need to enter its attributes which I implemented in a bootstrap modal but when I finish drawing the modal doesn't show I get just a transparent page and it stays like that.

Here it is my html code :

<!-- Attribute Update Modal -->
    <div class="modal " id="attributeUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog  modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Attributes</h3>
            <button  class="btn-close btn-light" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="attribute-body">
            <div id="attributeContainer"></div>
          </div>
          <div class="modal-footer">
            <div class="col-md-12 text-center">
              <button id="btnSave" type="button" class="btn btn-success">
                Save
              </button>
              <button id="btnCancel" type="button" class="btn btn-warning">
                Cancel
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

Here it is my JavaScript code :

 drawInteraction.on("drawend", function (e) {
    var feature = e.feature;
    feature.set("geometry", feature.getGeometry());
    modifiedFeatureList.push(feature);

    var featureProperties = editGeoJSON
      .getSource()
      .getFeatures()[0]
      .getProperties();
    document.getElementById("attributeContainer").innerHTML = "";
    for (var key in featureProperties) {
      if (featureProperties.hasOwnProperty(key)) {
        if (key != "geometry") {
          if (key != "id") {
            var div = document.createElement("div");
            div.className = "mb-3";

            var lbl = document.createElement("label");
            lbl.className = "form-label";
            lbl.innerHTML = key;

            var inputBox = document.createElement("input");
            inputBox.className = "form-control";
            inputBox.id = key;
            inputBox.value = "";

            div.appendChild(lbl);
            div.appendChild(inputBox);

            document.getElementById("attributeContainer").appendChild(div);
          }
        }
      }
    }
    $("#attributeUpdateModal").modal('show');
  });

Does anyone have an idea about this issue?