The id

Change

$id = isset($_GET['MemberID']);

to

$id = intval($_GET['MemberID'] ?? 0);

Explanation: You are checking whether you received a MemberID as a GET parameter and you assign this truth-value to $id. Instead, you will need to set the id to the actual value, defaulting to something invalid (0, for example).

Further defaults

You have these:

        $fName = $_POST['firstname'];
        $lName = $_POST['lastname'];
        $gender = $_POST['gender'];
        $birthDate = $_POST['birthdate'];
        $address = $_POST['address'];
        $phone = $_POST['phone'];

You should default these values as well for the case when some parameter is not received.

Prevent SQL injection

You have

$edit_query = mysqli_query($con,"UPDATE tbl_members SET FirstName='$fName', LastName='$lName', Gender ='$gender', DateOfBirth = '$birthDate', Address = '$address', PhoneNumber = '$phone' WHERE MemberID='$id';") or die("error occurred");

which is highly unsafe, even if you pass the correct id. A user might pass malicious code in some of the user inputs and then your query will execute that malicious code. Parameterize the query via PDO or mysqli or the way of your choice.

Example for SQL injection:

Query:

"select email from users where username ='" . $username . "'";

The user passes ‘;delete from users where ”=’ as username so your command ends up being

select email from users where username ='';delete from users where ''=''

This can be done to your query as well, one of the parameter might receive some malicious SQL script, which, when injected as a raw parameter without escaping into your query will wreak havoc.

XSS injection

You have

        while($row = mysqli_fetch_assoc($result))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }

But this is highly unsafe, because these values may contain malicious HTML code, like a Javascript script which will end up causing harm, like stealing your cookie or something of the like. You could do something like this:

        while($row = filter_var_array(mysqli_fetch_assoc($result), FILTER_SANITIZE_SPECIAL_CHARS))
        {
            echo "<tr>";
            echo "<td>".$row['MemberID']."</td>";
            echo "<td>".$row['LastName']."</td>";
            echo "<td>".$row['FirstName']."</td>";
            echo "<td>".$row['Gender']."</td>";
            echo "<td>".$row['PlanName']."</td>";
            echo "<td>".$row['StartDate']."</td>";
            echo "<td>".$row['EndDate']."</td>";
            echo "<td>".$row['JoinDate']."</td>";

            echo "<td class='crudButton'>".

                    "<a class='click open-updateModal' data-id='".$row['MemberID']."'> 
                        <span class='material-icons-sharp'>
                        edit
                        </span>".                                       
                    "</a>".

                    "<a class='click open-deleteModal'>".
                        "<span class='material-icons-sharp'>delete</span>".
                    "</a>".

                 "</td>";
                 
            echo "</tr>";
        }

Notice the function call inside the while condition.

Individual vs. plural selectors in Javascript

You have this code:

//update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModal = document.querySelector('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

open_updateModal.addEventListener('click', () => {
    modal2.showModal();

})

close_updateModal.addEventListener('click', () => {
    modal2.close();

})

In the code above, for open_updateModal you search for the first match in the HTML, which happens to be your very first button. Instead, you need to find all the buttons, loop them and add the event handler to them:

//update dialog
const modal2 = document.querySelector('.update-modal');
const open_updateModals = document.querySelectorAll('.open-updateModal');
const close_updateModal = document.querySelector('.close-updateModal');

for (let open_updateModal of open_updateModals) {
    open_updateModal.addEventListener('click', () => {
        modal2.showModal();
    });
}

close_updateModal.addEventListener('click', () => {
    modal2.close();

})

Note that I’m loading the plurality of items via querySelectorAll instead of querySelector and I store the results into open_updateModals, which is then looped using an iterator called open_updateModal and the event is being added to each matching element.