How to display multiple values entered in dynamically created input?

Question

I am calling 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 is appearing.

2)when I am adding multiple enteries into the different input block and then trying to displaying on screen it takes the first input entry only multiple times. PLease let me know where i am going wrong. Edit: I tried other solutions on stackoverflow, not seem to be working for my usecase

//code to delete the input block
$('body').on('click', '.delbtn', function(e) {
  $(this).closest(".contactIp").remove();
});
//function to add the input block
function addpoc() {
  let el = '';
  el += '<div class="contactIp"><div><div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div><div class="name"><label for="lname">Last name:</label><br><input type="text" class="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="workemail" placeholder="Work email"></div><div class="three" id="three" style="display: none;"><input type="email" name="personalemail" placeholder="Personal email"></div></div><br><br> <div><button class="delbtn"><span class="inbtn">&times</span>Delete</button></div></div>'

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

function showMail(selecteop) {
  var first = $(".fname").val();
  var second = $(".lname").val();
  var workemail1 = $(".workemail").val();
  var personalemail1 = $(".personalemail").val();
  document.getElementById("contact").innerHTML += '<br>' + first + " " + second;
  if (selecteop.value == "workmail") {
    document.getElementById("contact_mail").innerText = workemail1;
    $(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();
    document.getElementById("contact_mail").innerHTML = personalemail1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>Where can we reach YOU?</h1>
  <div class="addelement">
    <div class="contactIp">
      <div>
        <div class="name"><label for="fname">First name:</label><br><input type="text" class="fname" name="fname" placeholder="Ricky"></div>
        <div class="name"><label for="lname">Last name:</label><br><input type="text" class="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 class="workemail" type="email" name="workemail" placeholder="Work email">
        </div>
        <div class="three" id="three" style="display: none;">
          <input class="personalemail" type="email" name="personalemail" placeholder="Personal email">
        </div>
      </div>
    </div>
  </div>


  <div style="width:100%">
    <button style="width:100%" id="addbtn" onclick="addpoc()">Add another point of contact</button>
  </div>

</div>
<p id="contact"></p>
<p id="contact_mail"></p>
</div>

Answer 1

So your deleteInp function deletes the first item on the page. That's probably not what you want. I suggest changing the call to pass this as a parameter (the value will be the button that was clicked), then use that parameter to find the closest contactIp:

<button onclick="deleteInp(this)">

function deleteInp(theButton) {
  $(theButton).closest(".contactIp").remove();
}

Again with your showMail function, you are pulling the first "firstName" which appears on the page, instead of the one that corresponds to the clicked button. You are already passing this. So do something like

var first = $(selecteop).closest(".fname").val();