How to get jQuery change(function() to target within each parent and hide div corresponding value not selected

Question

I have a lot of tables within a single page with each same select that on change should toggle/change a DIV depending on value, but at the moment I can only get it to change with the first select, and even then if I choose yes it will show the corresponding div, but if I choose No afterwards it simply appends to the first instead of hidding it.

I have tried using id´s, class and here below is my latest try that has gotten me the closest to a solution using both ID, Class and Value .. but even after adding and playing with parent/children and find I have not been able to solve .. anyone with a solution? :-)

Here is a small version of the script:

$(function() {
  $('#CompanyMobilephone').change(function() {
    $(this).parent().find('.CompanyMobilephoneDIV').hide();
    $('#' + $(this).val()).show();
  });
});

.form_response_warning {
  float: center !important;
  vertical-align: top;
  text-align: center !important;
  background-color: #ffc107;
  width: 100%;
  color: black;
  padding: 4px;
  font-size: 14px;
  font-family: Helvetica;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

.form_response_info {
  float: center !important;
  vertical-align: top;
  text-align: center !important;
  background-color: #17a2b8;
  color: white;
  padding: 4px;
  font-size: 14px;
  font-family: Helvetica;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<table>
  <tr>
    <td>

      <table>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
        </tr>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
        </tr>
      </table>

      <form name="CompanyMobilephone1" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
        <select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
          <option selected>Choose...</option>
          <option value="yes" class="CompanyMobilephoneYES">Yes</option>
          <option value="no" class="CompanyMobilephoneNO">No</option>
        </select>

    </td>
  </tr>
</table>

<table>
  <tr>
    <td>

      <table>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
        </tr>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
        </tr>
      </table>

      <form name="CompanyMobilephone2" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
        <select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
          <option selected>Choose...</option>
          <option value="yes" class="CompanyMobilephoneYES">Yes</option>
          <option value="no" class="CompanyMobilephoneNO">No</option>
        </select>

    </td>
  </tr>
</table>

Answer 1

Change the id on selects (as well as all repeating ids) to class and then traverse to closest table and find() and use the value as class selector for the one to show

$(function() {
  $('select.CompanyMobilephone').change(function() {
    $(this).closest('table').find('.CompanyMobilephoneDIV')
                            .hide().filter('.' + this.value).show();
  });
});

.form_response_warning {
  float: center !important;
  vertical-align: top;
  text-align: center !important;
  background-color: #ffc107;
  width: 100%;
  color: black;
  padding: 4px;
  font-size: 14px;
  font-family: Helvetica;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

.form_response_info {
  float: center !important;
  vertical-align: top;
  text-align: center !important;
  background-color: #17a2b8;
  color: white;
  padding: 4px;
  font-size: 14px;
  font-family: Helvetica;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .25), 0 3px 10px 5px rgba(0, 0, 0, 0.05) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<table>
  <tr>
    <td>

      <table>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
        </tr>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
        </tr>
      </table>

      <form name="CompanyMobilephone1" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
        <select class="custom-select CompanyMobilephone" name="CompanyMobilephone" >
          <option selected>Choose...</option>
          <option value="yes" class="CompanyMobilephoneYES">Yes</option>
          <option value="no" class="CompanyMobilephoneNO">No</option>
        </select>

    </td>
  </tr>
</table>

<table>
  <tr>
    <td>

      <table>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV no form_response_warning" id="no" colspan="2" style="width: 100%; display:none;" align="center"><b>This is shown when NO has been chosen!</b></td>
        </tr>
        <tr style="border-collapse: collapse; border-bottom: 0px solid #FFFFFF; width: 100%;">
          <td class="CompanyMobilephoneDIV yes form_response_info" id="yes" colspan="2" style="width: 100%; display:none;" align="center"><b>This is positive, you choose YES!</b></td>
        </tr>
      </table>

      <form name="CompanyMobilephone2" id="CompanyMobilephone1" action="update_userdata.asp" method="post">
        <select class="custom-select CompanyMobilephone" name="CompanyMobilephone" >
          <option selected>Choose...</option>
          <option value="yes" class="CompanyMobilephoneYES">Yes</option>
          <option value="no" class="CompanyMobilephoneNO">No</option>
        </select>

    </td>
  </tr>
</table>

Answer 2

The answer is pretty simple - use closest() in concert with find(). However, you should really consider simplifying your code for the sake of legibility and reusability.

Set up the styles for your response table

<style>
.response-container tr {
  border-collapse: collapse; 
  border-bottom: 0px solid #FFFFFF; 
  width: 100%;
}

.response-container tr td {
  width: 100%; 
  display:none;
  text-align:center;
  font-weight:bold;
}

</style>

The script has the closest() find() combo I was referring to. closest(element) finds the closest container element moving up the chain that matches the element argument. To accomplish this, I gave the outer container a classname (set-container) and the response table got the class response-container

<script>
$(function() {
  $('#CompanyMobilephone').change(function() {
    var toFind = $(this).val() == "yes" ? ".form_response_info" : ".form_response_warning" ;
    $(this).closest('.set-container').find('.response-container td').hide(); // hide them all
    $(this).closest('.set-container').find(toFind).show(); // then just show the one you want
  });
});
</script>

Here is the simplified HTML. There is no need for IDs

<table class='set-container'>
  <tr>
    <td>
      <table class='response-container'>
        <tr>
          <td class="form_response_warning" colspan="2" >This is shown when NO has been chosen!</td>
        </tr>
        <tr>
          <td class="form_response_info" colspan="2" >This is positive, you choose YES!</td>
        </tr>        
      </table>

      <form action="update_userdata.asp" method="post">
        <select class="custom-select" name="CompanyMobilephone" id="CompanyMobilephone">
          <option selected>Choose...</option>
          <option value="yes" >Yes</option>
          <option value="no" >No</option>
        </select>

    </td>
  </tr>
</table>