選択オプションが選択されているときにフォームフィールドのジャンプを停止するにはどうすればよいですか？

Question

複数のフィールドを持つ連絡先フォームを作成しようとしています。誰かが自分の問い合わせがクラスに興味を持っていることを選択すると、私はJavascriptを持っています。問題は、これが発生したときに、すべてのフィールドが右に飛び、ラジオボタンがJavascriptを使用する前と同じように1行に収まるわけではないということです。

任意のアイデア？

function showfield(name) { 
 
    if (name == 'Interested In Class') document.getElementById('reveal').innerHTML = '<div id="form-group"> <label for="level">Level Of English:</label> <input name="level" type="radio" id="level" required>Beginner<input name="level" type="radio" id="level" required>Intermediate<input name="level" type="radio" id="level" required>Advanced</div>'; 
 
    else document.getElementById('reveal').innerHTML = ''; 
 
}

/* Forms */ 
 

 
form { 
 
    display: table; 
 
} 
 
#form-group { 
 
    display: table-row; 
 
} 
 
#form-group label:after { 
 
    content: "*"; 
 
    color: red; 
 
    font-size: 15px; 
 
    vertical-align: super; 
 
} 
 
label { 
 
    font-size: 24px; 
 
    display: table-cell; 
 
} 
 
input[type=text] { 
 
    width: 100%; 
 
    padding: 8px 15px; 
 
    margin: 8px 0; 
 
    margin-left: 15px; 
 
    border: solid #047BFF; 
 
    border-radius: 5px; 
 
    outline: none; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
} 
 
input[type=text]:focus { 
 
    border: solid #5BD2FF; 
 
} 
 
select { 
 
    width: 100%; 
 
    padding: 8px 15px; 
 
    margin: 8px 0; 
 
    margin-left: 15px; 
 
    border: solid #047BFF; 
 
    border-radius: 5px; 
 
    outline: none; 
 
    box-sizing: border-box; 
 
    display: table-cell; 
 
} 
 
select:focus { 
 
    border: solid #5BD2FF; 
 
} 
 
input[type=radio] { 
 
    margin: 8px 0; 
 
    margin-left: 15px; 
 
    margin-right: 5px; 
 
    margin-top: 16px; 
 
    display: table-cell; 
 
} 
 
#comments { 
 
    width: 100%; 
 
}

<div id="contentOS"> 
 
    <form name="contact" method="post" action="#" class="contentcontact"> 
 
    <div id="form-group"> 
 
     <label for="firstName">First Name:</label> 
 
     <input name="firstName" type="text" id="firstName" required> 
 
    </div> 
 
    <div id="form-group"> 
 
     <label for="lastName">Last Name:</label> 
 
     <input name="lastName" type="text" id="lastName" required> 
 
    </div> 
 
    <div id="form-group"> 
 
     <label for="email">Email:</label> 
 
     <input name="email" type="text" id="email" required> 
 
    </div> 
 
    <div id="form-group"> 
 
     <label for="query">Select Your Query:</label> 
 
     <select name="query" type="radio" id="query" onchange="showfield(this.options[this.selectedIndex].value)" required> 
 
     <option></option> 
 
     <option value="Interested In Class">I'm interested in joining a class</option> 
 
     <option value="Other">Other</option> 
 
     </select> 
 
    </div> 
 
    <div id="reveal"></div> 
 
    <div id="form-group"> 
 
     <label for="comments">Comments:</label> 
 
     <input name="comments" type="text" id="comments" required> 
 
    </div> 
 
    <input type="submit"> 
 
    </form> 
 

 
</div>

Answer 1

あなたのコードが動作しない理由は、<div id="form-group">はこれであなたのhtmlコードを追加し<div id="reveal">

を囲むされていないことです

：ここ

コードです

<div id="form-group"> 

     <label for="query">Select Your Query:</label> 
     <select name="query" type="radio" id="query" onchange="showfield(this.options[this.selectedIndex].value)" required> 
     <option></option> 
     <option value="Interested In Class">I'm interested in joining a class</option> 
     <option value="Other">Other</option> 
     </select> 
     <!-- this is where the </div> was wrongly placed --> 
     <div id="reveal"></div> 
     </div>