选择单选按钮后的下拉列表

Question

我创建了一组2个单选按钮。如果选择“是”，则会显示下拉列表。可以选择下拉列表中的任何选项。如果用户选择“前台主管”选项，下面会出现两个单选按钮，其中包含“接待员”和“职员”的选项。如果用户选择“其他”选项，则会出现一个可选文本框，供用户键入下拉列表中未列出的位置。直到这部分对我都有好处。

如果选择“否”单选按钮，我想要的是创建另一个下拉列表。第二个下拉列表将由“前台官员”和“其他人”组成。如果用户选择“前台主管”选项，下面会出现两个单选按钮，其中包含“接待员”和“职员”的选项。如果用户选择“其他”选项，则会出现一个可选文本框，供用户键入下拉列表中未列出的位置。

这是因为FDO工作和其他工作可以应用于永久和救济工作。我尝试创建另一个div，但我知道我不能两次使用相同的id。我该如何解决这个问题？

我在链接中提供了代码 - https://jsfiddle.net/7ksatyaq/

<!DOCTYPE html>
<html lang="en">
<head>

    <script type="text/javascript">
  function checkPhyDis(phydis) {
    //Hide all jobs
    var tasks = document.querySelectorAll("#task1, #task2");
    [].forEach.call(tasks, function(task) {
      task.style.display = 'none';
    })

    if (phydis === "Front Desk Officer (FDO)")
      document.getElementById('task1').style.display = 'block';

    else if (phydis === "Others")
      document.getElementById('task2').style.display = 'block';
  }
</script>

</head>

<body>


    <h3 style="text-decoration: underline">Position Applied -</h3>


      <p>
          <b>Permanent or Relief?</b><b style="color: red"> *</b>
          <div class="editfield">
             <label><input type="radio" class="PR" name="PermRelief" id="yesid" value="Yes" onclick="document.getElementById('PermRelief').style.display='block'" required> Yes </label>
            <label><input type="radio" class="PR" name="PermRelief" id="noid" value="No" onclick="document.getElementById('PermRelief').style.display='none'" required> No </label>
            </div>


<div class="editfield" id="PermRelief" style="display:none">
    <label for="Position1">Permanent Job:</label>
    <br>
    <select name="Position1" id="Position1" onchange='checkPhyDis(this.value)'>
      <option value="Security Officer (SO)">Security Officer (SO)</option>
      <option value="Senior Security Officer (SSO)">Senior Security Officer (SSO)</option>
      <option value="Supervisor (SS)">Supervisor (SS)</option>
      <option value="Senior Supervisor (SSS)">Senior Supervisor (SSS)</option>
      <option value="Chief Security Officer (CSO)">Chief Security Officer (CSO)</option>
      <option value="Security Executive (SE)">Security Executive (SE)</option>
      <option value="Operation Executive (OE)">Operation Executive (OE)</option>
      <option value="Front Desk Officer (FDO)">Front Desk Officer (FDO)</option>
      <option value="Others">Others</option>
    </select>


    <div id="task1" name="Position1" style="display:none;">
      <label><input type="radio" name="FDO" id="Receptionistid" value="Receptionist"> Receptionist </label>
      <label><input type="radio" name="FDO" id="Clerkid" value="Clerk"> Clerk </label> <br>
    </div>


    <div id="task2" name="Position1" style="display:none;">
      <label for="Others">If the position you want to apply is not stated in any of the options <br> please state in the box below:</label>
      <br>
      <textarea rows="4" cols="50" name="Other_Position" id="Other_Position"></textarea>
    </div>
  </div>
</p>


</body>
</html>