How can I create a Popup with complex HTML and CSS elements?

Question

On this image, is what I coded, I want to add a modal Popup when clicked “Next”.

On the modal Popup, I want to add complex HTML and css codes like this: This is what I want the modal Popup to look like

Then if possible, add a JavaScript code that allows to continue on the next step with other contents appearing like this: i also want this on the modal Popup.

I know it’s a complex code to code but I would really appreciate your help. I tried coding the modal Popup but it doesn’t work correctly and sometimes it changes and affects my css on other parts of the website.

Here is the complete code of what I coded (Picture 1) and which I want the modal Popup to appear when Next is clicked:

let selectedDestinations = [];

function toggleSelection(element) {
  if (element.classList.contains("selected")) {
    element.classList.remove("selected");
    selectedDestinations = selectedDestinations.filter(item => item !== element.textContent);
  } else {
    element.classList.add("selected");
    selectedDestinations.push(element.textContent);
  }
}

function continueToNextStep() {
  if (selectedDestinations.length === 0) {
    alert("Please select at least one destination.");
  } else {
    alert("Selected destinations: " + selectedDestinations.join(", "));
    // Add your logic to proceed to the next step here
  }
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

h1 {
  font-size: 24px;
}

.destination-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.destination {
  flex: 1;
  color: #202f1c;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  border: 1px solid #A67c39;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  margin: 5px;
}

.destination.selected {
  background-color: #A67C39;
  color: #15100B;
}

button {
  background-color: #000000;
  color: white;
  border: none;
  border-color: #15100b;
  border-radius: 100px;
  margin-top: 20px;
  padding: 10px 70px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #A67c39;
}

@media screen and (max-width: 768px) {
  .destination {
    font-size: 12px;
  }
}

<div class="destination-options">
  <div class="destination" onclick="toggleSelection(this)">Serengeti National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Ngorongoro Crater</div>
  <div class="destination" onclick="toggleSelection(this)">Lake Manyara National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Tarangire National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Arusha National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Stone Town</div>
  <div class="destination" onclick="toggleSelection(this)">Beach Holiday</div>
  <div class="destination" onclick="toggleSelection(this)">Udzungwa National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Olduvai Gorge</div>
  <div class="destination" onclick="toggleSelection(this)">Mountain Kilimanjaro Climbing</div>
  <div class="destination" onclick="toggleSelection(this)">I have not yet decided, please help me decide exciting places</div>
  <div class="destination" onclick="toggleSelection(this)">Volunteer</div>
</div>
<button id="continue-btn" onclick="continueToNextStep()">Next</button>

I tried coding the modal Popup that would appear when “Next” button is clicked so that the modal Popup is triggered to appear. I expected the modal Popup to be fullWidth until a close icon is clicked to close the modal. Here is the code I tried coding:

let selectedDestinations = [];

function toggleSelection(element) {
  if (element.classList.contains("selected")) {
    element.classList.remove("selected");
    selectedDestinations = selectedDestinations.filter(item => item !== element.textContent);
  } else {
    element.classList.add("selected");
    selectedDestinations.push(element.textContent);
  }
}

function openModal() {
  if (selectedDestinations.length === 0) {
    alert("Please select at least one destination.");
  } else {
    const modal = document.getElementById("custom-modal");
    modal.style.display = "block";
    const selectedDestinationsElement = document.getElementById("selected-destinations");
    selectedDestinationsElement.textContent = "Selected destinations: " + selectedDestinations.join(", ");
    // Add your logic to proceed to the next step here
  }
}

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
}

h1 {
  font-size: 24px;
}

.destination-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align items: center;
  gap: 10px;
  text-align: center;
}

.destination {
  flex: 1;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border-radius: 100px;
  border: 1px solid #A67c39;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  margin: 5px;
}

.destination.selected {
  background-color: #A67C39;
  color: #15100B;
}

button {
  background-color: #000000;
  color: white;
  border: none;
  border-color: #15100b;
  border-radius: 100px;
  margin-top: 20px;
  padding: 10px 70px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #A67c39;
}

@media screen and (max-width: 768px) {
  .destination {
    font-size: 12px;
  }
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
  background-color: #fff;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
  margin: 10% auto;
  padding: 20px;
}

<div class="destination-options">
  <div class="destination" onclick="toggleSelection(this)">Serengeti National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Ngorongoro Crater</div>
  <div class="destination" onclick="toggleSelection(this)">Lake Manyara National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Tarangire National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Arusha National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Stone Town</div>
  <div class="destination" onclick="toggleSelection(this)">Beach Holiday</div>
  <div class="destination" onclick="toggleSelection(this)">Udzungwa National Park</div>
  <div class="destination" onclick="toggleSelection(this)">Olduvai Gorge</div>
  <div class="destination" onclick="toggleSelection(this)">Mountain Kilimanjaro Climbing</div>
  <div class="destination" onclick="toggleSelection(this)">I have not yet decided, please help me decide exciting places</div>
  <div class="destination" onclick="toggleSelection(this)">Volunteer</div>
</div>
<button id="continue-btn" onclick="openModal()">Next</button>