Prevent dynamic added selects from changing other divs behavior

Question

I have an array of phones that I loop through in my razor to display them one by one on button click from a partial. Each phone has a dropdown for international and domestic phone values. On change of the dropdown, I need to hide some textboxes and show some others. I got it to work showing and hiding textboxes, but the issue now is that each dropdown will change all phones sections and it should only affect the one within its div.

Here's my view:

 @for (int x = 0; x < Model.Phones.Count; x++)
 {
    @Html.EditorFor(m => m.Phones[x], "_PhonePartial")
 }

Here's the code to show the phone partial on the button click, which hides all of them except the first one:

 $('.phone-wrapper').hide();
 $('.phone-wrapper').first().show();
 var count = 1;
 $('.add-phone-wrapper').on('click', function () {
    $('.phone-wrapper:eq('+ count+')').show();
    count++;
 });

Here's the partial phone view:

  <div class="phone-wrapper"> 
     <div class="col-md-1 domestic-phone">
       @Html.TextBoxFor(m => m.AreaCode)
     </div>

   <div class="col-md-1 domestic-phone">
      @Html.TextBoxFor(m => m.code2)
   </div>

   <div class="col-md-1 domestic-phone">
     @Html.TextBoxFor(m => m.code3)
   </div>

   <div class="col-md-3 international-phone">
     @Html.TextBoxFor(m => m.Internationalbox)
   </div>  
    <div class="col-md-3">
       <select class="form-control phone-selection">
         <option selected="selected" value="domestic">Domestic</option>
         <option value="international">International</option>
      </select>
    </div>
  </div>

The Javascript for hiding and showing the textboxes is:

$(function () {

  $(".phone-selection").on("change", function () {
    var $this = $(this),
        $closeDiv = $this.closest(".phone-section");

    if ($this.val().toLowerCase() === "domestic") {

        $closeDiv.find(".domestic-phone").show();
        $closeDiv.find(".international-phone").hide();

    } else {

        $closeDiv.find(".domestic-phone").hide();
        $closeDiv.find(".international-phone").show();
    }

   });
 });

Any help will be greatly appreciated, thanks!

Answer 1

Try this

 $(function () {

 $(".phone-selection").on("change", function () {
var $this = $(this),
    $closeDiv = $this.closest(".phone-section");

 if ($this.val().toLowerCase() === "domestic") {
    $(".domestic-phone").each(function () {
                $(this).show();
            });       
    $(".international-phone").each(function () {
                $(this).hide();
            }); 
} else {

     $(".domestic-phone").each(function () {
                $(this).hide();
            });       
    $(".international-phone").each(function () {
                $(this).show();
            }); 
}

 });
 });