Element not getting displayed on dynamic dropdown selection-CodePudding

This is my code, basically, on click of button, I want to call this method addpoc() which creates a block of input boxes and a dropdown. And on the selection of dropdown option personal/workmail an input box should appear. It is happening for the first time where I have not creating any block dynamically but after that I can see the dropdown but input box is not coming as per the selected option in the dropdown. And also for some reason this undefined is coming as well.

function addpoc() {
  let el;
  el  = '<div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail()"><option value="workmail" selected>Work email </option><option value="personalmail">Personal Email</option></select></div><div id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div>'

  $('#addelement').append(el);
}

function showMail() {
  let selecteop = document.getElementById("contact method");
  if (selecteop.value == "workmail") {

    $("#two").show();
    $("#three").hide();
  } else {
    $("#three").show();
    $("#two").hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clearfix">
  <div class="name">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" placeholder="Ricky">
  </div>
  <div class="name">
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" placeholder="Ju">
  </div>
</div>
<div class="parent" style="width: 100%;">
  <div id="one">
    <select id="contact method" onchange="showMail()">
      <option value="" disabled selected hidden>Preferred contact method</option>
    
      <option value="workmail">Work email </option>
      <option value="personalmail">Personal Email</option>
    </select>
  </div>
  <div id="two" style="display: none;">
    <input type="email" name="email" placeholder="Work email">
  </div>
  <div id="three" style="display: none;">
    <input type="email" name="email" placeholder="Personal email">
  </div>
</div>
<div>
  <div id="addelement"></div>
  <button id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>

CodePudding user response：

The function showMail should take an input that indicates which SELECT element is changed. So the first thing is to switch to onchange="showMail(this)" to pass the changed element to the function. Next you need to target the closest TWO and THREE elements. Targeting an id with # sign will always select the first occurance in the document so you need to give those divs a class name e.g. .two and .three then using jquery selectors, target to the desired one. I used .closest(".parent").find(".two") but you may find another logic to to find the nearest divs.

about undefinded: Variables defined with let must be Declared before use even with an empty value.

function addpoc() {
  let el='';
  el  = '<br><div class="clearfix"><div class="name"><label for="fname">First name:</label><br><input type="text" id="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" id="lname" name="lname" placeholder="Ju"></div></div><div class="parent" style="width: 100%;"><div id="one"><select id="contact method" onchange="showMail(this)"><option disabled selected>Prefered contact method</option><option value="workmail">Work email </option><option value="personalmail">Personal Email</option></select></div><div class="two" id="two" style="display: none;"><input type="email" name="email" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input type="email" name="email" placeholder="Personal email"></div></div><br>'

  $('#addelement').append(el);
}

//Creating first block instead of repeating codes in html
addpoc();

function showMail(selecteop) {
  if (selecteop.value == "workmail") {
    $(selecteop).closest(".parent").find(".two").show();
    $(selecteop).closest(".parent").find(".three").hide();
  } else {
    $(selecteop).closest(".parent").find(".three").show();
    $(selecteop).closest(".parent").find(".two").hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div id="addelement"></div>
  <button id="addbtn" onclick="addpoc()">Add another point of contact</button>
</div>