How to get values dynamically from multiple html elements which are present in same div?

Question

I have generated html dynamically like

<div id="dynamic-contact-details" class="col-sm-7">
    <div id="count0" class="space">
        <div class="col-sm-3">
            <select id="contact-type0" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type0" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value0" id="contact-type-value0" class="form-control"><small id="contact-type-value0" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count0" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button></div>
    <div id="count2" class="space">
        <div class="col-sm-3">
            <select id="contact-type2" class="form-control"><option value="">Select</option><option value="Phone">Phone</option><option value="Whatapp">Whatapp</option><option value="Facebook">Facebook</option><option value="Web">Web</option><option value="Fax">Fax</option></select><small id="contact-type2" class="text-danger hide">Contact Type is Required</small>
        </div>
        <div class="col-sm-8">
            <input type="text" name="contact-type-value2" id="contact-type-value2" class="form-control"><small id="contact-type-value2" class="text-danger hide">Contact Type Value is Required</small>
        </div>
        <button value="count2" class="remove_field btn btn-white"><i class="fa fa-trash"></i></button>
    </div>
</div>

in jquery

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    $this.find("input[type=text]").each(function() {
        var textBoxValue = $(this).val();
        var selectValues = $(".space select").val();
        console.log(textBoxValue);
    });
});

I am trying to fetch select values in the same code. It always gets one value in all iterations. I want to perform some operation on both values, that is why I am trying to tweak the above code for fetching both values inside same loop.

Please help me!!!

Answer 1

You can use $this which refers to space with find()

var selectValues = $this.find("select").val();

---

As you have only single input element, You can just use to target them in single iteration

var numItems = $(".space").length;
$('.space').each(function(i, obj) {
    var $this = $(this);
    var selectValues = $this.find("select").val();
    var textBoxValue = $this.find("input[type=text]").val();
    console.log(selectValues, textBoxValue);
});

You can use .closest() to traverse up to parent space then use .find() to target the <select> element

var selectValues = $(this).closest(".space").find("select").val();

Answer 2

One thing you can do when you generate things dynamicly is that you can also generate the javascript dynamicly.

This has some cons aswell but in many cases it is quite useful.

Example in razor:

<div id="divtag@{id}"></div>
<script>
$this.find("#divtag@{id}").each(function() {});
</script>