Magento 2: How to prevent page reload on custom form

I am working on a simple custom form for my site where employees can perform internal orders between stores. The form and results div is as follows:

<form method="post" action="" id="myForm">
        
        <?php $store = $_GET['store']; ?>
    
        <!-- Store input -->
        <label for="store">Store: </label>
        <input name="store" type="hidden" id="store" value="<?php echo $store; ?>">
        <?php echo $store; ?>
        <br><br>

        <!-- Employee input -->
        <label for="employee">Employee: </label>
        <input name="employee" id="employee" type="text" maxlength="3"><br><br>

        <!-- Product input -->
        <label for="product">Product: </label>
        <input name="product" id="product" type="text" placeholder="Product SKU" maxlength="12">
        <label for="productQuantity">Quantity: </label>
        <input name="productQuantity" id="productQuantity" type="number" value="1">
        <input name="add" id="add" type="submit" value="Add" onClick="addRow()">
        <br><br>
        
        <button name="submit" type="submit" onClick="deleteRows()">Submit</button>
    
    </form>

<div id="table" style="overflow-x: auto">
        <table style="width: 300px">
            <thead>
              <tr>
                <th>Employee</th>
                <th>Product</th>
                <th>Qty</th>
              </tr>
            </thead>
            <tbody id="screen">
            </tbody>
        </table>
    </div>
    
    <div id="result">
            
    </div>
    
    <p>=================================</p>

The idea is that the user will use the add button to add the data to a table. The add button will also write the data to a temporary file. When the submit button is selected, the table is cleared, the data in the temporary file is written to a store-specific file, and all the data sent is printed to the user. This is the code for all of that:

<script>        
        
         $( document ).ready(function(){
              $('#screen').html(localStorage.getItem("data"));

         });
        
         // appends user input to html table
         function addRow(){
             
            var str = '<tr class = "boxType">
                         <td>'+$('#employee').val()+'</td>
                         <td>'+$('#product').val()+'</td>
                         <td>'+$('#productQuantity').val()+'</td>
                         </tr>';
            $('#screen').append(str);

          localStorage.setItem("data", $('#screen').html());
        }
        // deletes rows from table
        function deleteRows(){
            localStorage.clear();
            $('#screen').empty();
        }
        
    </script>
    
    <?php
    
    
    if(isset($_POST['add']))
    {
        // get variables from form
        $store = $_POST['store'];
        $employee = $_POST['employee'];
        $product = $_POST['product'];
        $productQuantity = $_POST['productQuantity'];
        
        // combines variables into one for file write
        $data = $store . "," . $employee . "," . $product . "," . $productQuantity . "n";
        // temp file
        $tfp = fopen('../index/data.txt', 'a+');
        
        // writes inputs to temp file
        if(fwrite($tfp, $data)) {
            echo 'Saved';
        }
        
        fclose($tfp);
    }
    
    if(isset($_POST['submit'])) {
            
            $store = $_POST['store'];
        
            // open the temp file in read mode
            $file = fopen('../index/data.txt', 'r');
            // prints each line sent to main file to user
            while(! feof($file)) {
                $line = fgets($file);
                echo $line."<br>";
            }
            // closes temp file
            fclose($file);
            
            // get everything from temp file
            $finalData = file_get_contents('../index/data.txt');
            
            // creates a file for each store location
            if($store == '001'){
                $fp = fopen('../index/data001.txt', 'a+');
                $phone = '(850) 234-2621';
            }
            elseif($store == '002'){
                $fp = fopen('../index/data002.txt', 'a+');
                $phone = '(850) 236-0392';
            }
            elseif($store == '004'){
                $fp = fopen('../index/data004.txt', 'a+');
                $phone = '(850) 939-9885';
            }
            elseif($store == '005'){
                $fp = fopen('../index/data005.txt', 'a+');
                $phone = '(850) 234-0067';
            }
            elseif($store == '006'){
                $fp = fopen('../index/data006.txt', 'a+');
                $phone = '(850) 837-3121';
            }
            elseif($store == '999'){
                $fp = fopen('../index/data999.txt', 'a+');
                $phone = '(850) 234-2621';
            }
        
            // writes to file and prints the data to the page for user to see
            if(fwrite($fp, $finalData)) {
                echo 'Sent to file<br />';
                echo "=================================<br />";
            }
            fclose($fp);
        
            // erases the contents of temp file
            $file = fopen('../index/data.txt', 'w');
            fclose($file);
        }
    ?>

Everything works perfectly, except I cannot seem to figure out how to prevent the page from reloading every time the add button is clicked. I tried useing the preventDefault method but then my data would not write to the temporary file. Any help would be appreciated.