JSFiddle - React, Tailwind, and code Playground

by Alberto_Montiel

HTML

<button id="addHsButton">Add Item</button>
    
    
    
    <div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="container">
      <p>Add a name and description for <br>the point of interest</p>
      <p class="validation"></p>
      <label>Name</label>
      <input type="text" id="textInput1" placeholder="Type the tooltip title"/><br>
      <label>Description</label>
      <textarea type="text" id="textInput2" rows="4" cols="31" placeholder="Type the feature description"></textarea>
      <button class="saveBtn">Save</button>
      <button class="cancelBtn">Cancel</button>
    </div>
  </div>
</div>

CSS

.modal {
    display: none; /* Hide the modal by default */
    position: fixed; /* Position the modal in the center of the screen */
    z-index: 2; /* Set the z-index to make sure the modal appears on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scrolling if the content overflows */
    background-color: rgba(0,0,0,0.4); /* Add a dark, semi-transparent background */
    border: 6px solid white;
  }
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 278px; /* Set the width of the modal */
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    font-weight: bold;
  }
  
  .close {
    color: black;
    float: right;
    font-size: 22px;
  }
  .close:hover,
  .close:focus {
    color:#aaa;
    text-decoration: none;
    cursor: pointer;
  }
  #panorama {
    width: 1324px;
    height: 768px;
}
#controls {
    position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    width: 100%;
    padding-bottom: 3px;
}
.ctrl {
    width: 200px;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #0D4599;
    border: none;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}
.ctrl:hover {
    color: white;
    background-color: #0B3066;
}

.saveBtn:hover {
    color: white;
    background-color: #0B3066;
}

input {
    font-size: 16px;
    width: 260px;
    min-height: 26px;
    margin-bottom: 8px;
}
textarea {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
.container {
    margin-top: 48px;
}


.hotSpotMarker{
    background-color: #0D4599;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border: 2px solid white;
    box-shadow: 2px 2px 2px 0 #00000010;
}

div.custom-tooltip span {
    visibility: hidden;
    position: absolute;
   ...

JavaScript

var hotspotArray = []; // Array to store the values
				var idCounter = 1; // Counter for generating unique IDs


       document.getElementById("addHsButton"); 
       addHsButton.addEventListener("click", () => {
       const modal = document.getElementById("myModal");
    modal.style.display = "block";
    const div = document.createElement("div");
     const container = document.querySelector(".container");
    container.appendChild(div);
    const closeBtn = modal.querySelector(".close");
    closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
    }); 
    const cancelBtn = modal.querySelector(".cancelBtn");
    cancelBtn.addEventListener("click", () => {
        modal.style.display = "none";
    }); 
    
       const saveSpot = modal.querySelector(".saveBtn");
    saveSpot.addEventListener("click", () => {
    
     const hotspotGroup = {
                    "id": idCounter,
                    "inputValue": "inputValue",
                    "inputBody": "inputBody",
                    "yaw": "yaw",
                    "pitch": "pitch",
                };
    

      hotspotArray.push(hotspotGroup);
          idCounter++
    console.log("Item added:",hotspotGroup);
  
    }); 
    
        
     
        });