画面遷移させたいのに遷移前のページと繋がって表示されてしまう

前提

PHPでじゃんけんゲームを作っています。
require_onceでindex.phpを読み込むと、
index.phpにてボタンを押した後、result.phpに画面遷移させたいのに、
画像のようにページ同士が繋がって表示されてしまいます。
何故かrequire_onceの行を消すと正常に表示されます。
原因と解決方法を教えていただければ幸いです。

イメージ説明

実現したいこと

require_onceを読み込んでも正常に画面遷移ができるようにしたい。

発生している問題・エラーメッセージ

エラーメッセージは表示されていません。

該当のソースコード

index.php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>じゃんけんゲーム</title>
8  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9  <link rel="stylesheet" href="style.css">
10  <link rel="icon" type="image/png" href="janken_pa.png">
11</head>
12<body>
13  <header class="text-center"><a href="./index.php" class="page-title"><h1>じゃんけんゲーム</h1></a></header>
14  <main class="container">
15    <p class="battle-description">出す手を選んで勝負して下さい。</p>
16    <form action="./result.php" method="post">
17      <input type="radio" name="janken" value="グー" id="gu" checked>
18      <label for="gu">グー</label>
19      <input type="radio" name="janken" value="チョキ" id="choki">
20      <label for="choki">チョキ</label>
21      <input type="radio" name="janken" value="パー" id="pa">
22      <label for="pa">パー</label><br>
23      <button type="submit" onclick="location.href='./result.php'" class="battle-button">勝負する！</button>
24    </form>
25  </main>
26  <footer><p class="footer-text"><small>&copy; 2022 ******</small></p></footer>
27  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
28</body>
29</html>

result.php
1<?php
2declare(strict_types=1);
3
4require_once(dirname(__FILE__) . '/index.php');
5
6?>
7
8<!DOCTYPE html>
9<html lang="ja">
10<head>
11  <meta charset="UTF-8">
12  <meta http-equiv="X-UA-Compatible" content="IE=edge">
13  <meta name="viewport" content="width=device-width, initial-scale=1.0">
14  <title>じゃんけんゲーム</title>
15  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
16  <link rel="stylesheet" href="style.css">
17  <link rel="icon" type="image/png" href="janken_pa.png">
18</head>
19<body>
20  <header class="text-center"><a href="./index.php" class="page-title"><h1>じゃんけんゲーム</h1></a></header>
21  <main class="container">
22    <p class="before-result">結果は…</p>
23    <p class="game-result">ゲーム結果の変数が入ります</p>
24    <p class="choice-result">あなた : ユーザの選択した値が入ります</p>
25    <p class="choice-result">コンピューター : コンピューターが出力した値が入ります</p>
26    <a href="./index.php" class="retry-button">>>もう一回勝負する</a>
27  </main>
28  <footer><p class="footer-text"><small>&copy; 2022 ******</small></p></footer>
29  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
30</body>
31</html>