javascript - ボタンのクリックでフォームを表示する方法は?

Question

私は問題に直面しています。ユーザーが候補者に関する詳細を入力し、自分の画像をアップロードする必要があるフォームを作成しました。問題は、フォームに「Click To Add More Candidate」というボタンがあるため、このボタンをクリックすると、同じフォームが「moreCandidates」という部門の下に再表示されることです。これを達成するには、どうすればよいですか？私の頭に浮かんだことは次のとおりです。

1. onclickフォームのコンテンツ (つまり、すべての入力フィールドなど) と「Click To Add More Candidate」ボタンを正確に作成する関数を JavaScript で作成するには、前述の部門の下で関数を呼び出します。過去にこれと非常によく似たことをしたので、私はこれを行うことができます。ただし、今回は、間にディレクトリを読み取る PHP 関数を記述したため、フォーム全体を再度作成するのは得策ではないと思います。
2. または、2 番目に考えたのは、candidate.php というファイルにフォーム コードを記述し、そのファイルを AJAX で呼び出すことです。ここでの問題は、フォーム全体を再度呼び出している可能性があることです (ただし、候補者名などのフォームの内容を呼び出したいだけです)。

現時点では非常に混乱しています。皆さんからの助けをいただければ幸いです。前もって感謝します。

私のhtmlコード:

<div id="candidateForm">
    <table border="0">
        <form  method="post" action="formDetails.php" enctype="multipart/form-date">
            <tr>
                <td>Candidate Name:</td>
                <td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
            </tr>
            <tr>
                <td>Enroll No:</td>
                <td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
            </tr>
            <tr>
                <td>Candidate Image:</td>
                <td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
            </tr>
            <tr>
                <td>Cadidate Post:</td>
                <?php
                    //This is the target folder that is going to be read.
                    $target="uploads/";

                    //I an using a directory function in PHP scandir() which scans tha contains of the give directory
                    $dir=scandir($target);
                ?>

                <td> 
                    <select name="candidatePost">
                        <option value="candidatePost" select="selected">---------Select---------</option>
                        <?php 
                                foreach($dir as $folders)
                                {
                                    //When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
                                    if($folders!="."&& $folders!="..")
                                    //echo $folders;
                                    echo "<option class='candidateForm' value=$folders>$folders</option>";
                                }
                        ?>
                    </select>
                </td>
            </tr>
            <tr>
                <td>About The Candidate:</td>
                <td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
            </tr>
            <div id="moreCandidates"> </div>
            <tr>
            <td></td>
            <td><input type="button" value="Click To Add More Candidate"></input> </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
            </tr>
        </form>
    </table>
</div>