I have some JavaScript code in an HTML page with a button. I have two functions called 'total()' and 'con()' that handles the onClick event of the 2 buttons. i have tried putting the script tag on top of the form, buttons and i also tried putting it in the head tag. The code for the button is as follows

The problem is that when the button is clicked, the function is not called. What am I doing wrong here?

thanks for not criticizing me, i'm just a begginer.

         <form action="reserve.php" method="POST">
            <div class="tick"><img class="ticket" src='assets/img/<?php 
               echo($row["Photo"]);?>' style='margin-top:10px;'> 
               
               <h4><?php echo($row["Event_Name"]); ?></h4>
       <div class="table-responsive1">
            <table class="table">
                <tr>
                    <th>No. Of Persons</th>
                <th>
        <select class="form-control select2" name="Ticks" id="p" required="">
            <option selected="">Select # of Persons</option>
            <option value="1">Admit One</option>
            <option value="2">Admit Two</option>
            <option value="3">Admit Three</option>
            <option value="4">Admit Four</option>
            <option value="5">Admit Five</option>
        </select>
        </th>
                </tr>
                <tr>
                <th>Zone</th>
                    <th>
                    <select class="form-control select1" name="TickType" id="z" required="">
                    <option value="" selected="">Select a zone</option>
                        <option value="ga" id="ga" name="TickType">General Admission</option>
                        <option value="b" id="b">Bronze</option>
                        <option value="s" id="s">Silver</option>
                        <option value="g" id="g">Gold</option>
                        <option value="p" id="p">Platinum</option>
                        <option value="v" id="v">Vip</option>
                    </select>
                    </th>
        </tr>
         
         <div class="table-responsive">
            <table class="table">
                <thead>
                    <h3>Prices</h3>
                    <tr>
                        <th>Gen. Admission</th>
                        <th>Bronze</th>
                        <th>Silver</th>
                        <th>Gold</th>
                        <th>Platinum</th>
                        <th>VIP</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="ge"><?php echo($row["GenAd_Price"]);?>~Php</td>
                        <td id="br"><?php echo($row["Bronze_Price"]);?>~Php</td>
                        <td id="si"><?php echo($row["Silver_Price"]);?>~Php</td>
                        <td id="go"><?php echo($row["Gold_Price"]);?>~Php</td>
                        <td id="pl"><?php echo($row["Platinum_Price"]);?>~Php</td>
                        <td id="vi"><?php echo($row["Vip_Price"]);?>~Php</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <br><br>
         <input type='hidden' length='1' value='<?php echo($row["Event_ID"]); ?>' name = 'id'>
         
        <button class="but" type="submit" onclick="return con()">Done</button>
        </form>
        <h4 id="tot" style="position:absolute; top:80%;">Total: </h4>
        
        <button type="button" class="but" id="btn" onClick="total()">Compute</button>
        </div>
          <script>
            function con(){
            var conf = confirm('Are you finished?');
            if(conf){return true}
             else{return false}
             }
             function total(){
             Some Code here
             }
          </script>