How to redirect extensions in WordPress to home page?

I have a website in WordPress. It got hacked by Vietnam hackers.

I have tried to remove their code from the website. But still have some issues.

Some of my URLs work with the following extensions. Can anyone help me to redirect all the extensions to the home page? Example –

.html
.htm
/?vn
/?vietnam

Please guide me. How can I rid of this issue?

I need to redirect all these extensions to the Home page of the website.

Also, Can you please guide me on how can I save my website from Hackers? I already have HTTPS installed.

Looking forward to hearing from you.

php – Display foreach loop data to modal

I have a list that displays data from my database and when I click on the CTA, it should fire up a modal and display the data on the modal. The data is being displayed inside a foreach loop. I also have assigned the modal ID based off of the table row ID pulled from my database.

function getReservations() {

 $sql = "SELECT * FROM reservations";

 $stmt = $pdo->prepare($sql);

 $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

 return $results;

}
<?php $results = getReservations(); foreach ($results as $row) { ?>

    <div id="<?php echo $row['id']; ?>" class="modal opacity-0 pointer-events-none fixed w-full h-full top-0 left-0 flex items-center justify-center">
      <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>
       <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
           <!-- Add margin if you want to see some of the overlay behind the modal-->
             <div class="modal-content py-4 text-left px-6">
                <!--Title-->
                  <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold">Simple Modal!</p>
                     <div class="modal-close cursor-pointer z-50">
                       <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                       </svg>
                     </div>
                  </div>
             </div>
         </div>
  </div>
</div>

<?php } ?>

Here is the JavaScript I am working with:

    var openmodal = document.querySelectorAll('.modal-open')
    for (var i = 0; i < openmodal.length; i++) {
        openmodal[i].addEventListener('click', function (event) {
            event.preventDefault()
            toggleModal()
        })
    }

    const overlay = document.querySelector('.modal-overlay')
    overlay.addEventListener('click', toggleModal)

    var closemodal = document.querySelectorAll('.modal-close')
    for (var i = 0; i < closemodal.length; i++) {
        closemodal[i].addEventListener('click', toggleModal)
    }

    function toggleModal() {
    const body = document.querySelector('body')
    const modal = document.getElementById('<?php echo $row['id']; ?>')
    modal.classList.toggle('opacity-0')
    modal.classList.toggle('pointer-events-none')
    body.classList.toggle('modal-active')
    }

The functionality works, however, each row would only display data the from the first row’s ID and last row’s ID instead data off of their assigned ID. What changes/fixes could I apply to my code? Thank you and I appreciate your time reading.