Hide asterisk only for one field but show up for other fields

Question

I have a text field and a dropdown field shown below

When I select any value from the dropdown field called 'REASONS', hide the asterisk of VEHICLE_NO field , I'm doing the below but doesnt work, asteriskV ID is used for other fields to show/hide asterisks, my goal is to hide only for VEHICLE_NO and not for other fields when any of the value is selected from REASONS dropdown, how can i achieve this?

   <table>
   <tr><td><font id="asteriskV" color="red">*</font>VEHICLE TAG:</td>
   <td>
    <INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25"></td></tr>
    <tr>
     <td><font color="red">*</font>1)Reasons:</td><td>
       <select id="REASONS"  name="REASONS" class="MandatoryDD" style="width:200px">
     </select>
   </td></tr>
  </table>

  $('#REASONS').change(function () {       
   var sel = $(this).val();   
    if (sel == '1117' || sel == '1116' || sel=='1120'  || sel=='1121'){
        $("#testingForm #VEHICLE_NO #asteriskV").hide();        
    }
    });

Answer 1

Dear shwetha you can try this code.

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <table>
      <tr>
          <td><font id="asteriskV" color="red">*</font>VEHICLE TAG:</td>
          <td>
              <INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25">
          </td>
      </tr>
      <tr>
          <td><font color="red">*</font>1)Reasons:</td>
          <td>
              <select id="REASONS" name="REASONS" class="MandatoryDD" style="width:200px">
                  <option>Select Reason</option>
                  <option value="1117">Reason 1</option>
                  <option value="1116">Reason 2</option>
              </select>
          </td>
      </tr>
  </table>


  <script>
      $(function () {
          $('#REASONS').change(function () {
              var sel = $(this).val();
              if (sel == '1117' || sel == '1116' || sel == '1120' || sel == '1121') {
                  $("#asteriskV").hide();
              }
          });
      });
  </script>

https://jsfiddle.net/qaaf5vs9/

Answer 2

Add a class only to the font for VEHICLE_NO, and hide it using that class

    <table>
   <tr><td><font id="asteriskV" class="VEHICLE_NO" color="red">*</font>VEHICLE TAG:</td>
   <td>
    <INPUT TYPE="text" id="VEHICLE_NO" class="MandatoryVTxt" NAME="VEHICLE_NO" size="25"></td></tr>
    <tr>
     <td><font color="red">*</font>1)Reasons:</td><td>
       <select id="REASONS"  name="REASONS" class="MandatoryDD" style="width:200px">
     </select>
   </td></tr>
  </table>

  $('#REASONS').change(function () {       
   var sel = $(this).val();   
    if (sel == '1117' || sel == '1116' || sel=='1120'  || sel=='1121'){
        $(".VEHICLE_NO").hide();        
    }
    });

Answer 3

I'm as confused as jquery, where is the tag with 3 IDs? I think you want ...

$('#REASONS').change(function () {       
   var sel = $(this).val();   
    if (sel == '1117' || sel == '1116' || sel=='1120'  || sel=='1121'){
        $("#asteriskV").hide();        
    }
    });

and for select not change ...

$('#REASONS').focus(function() {       
   var sel = $(this).val();   
    if (sel == '1117' || sel == '1116' || sel=='1120'  || sel=='1121'){
        $("#asteriskV").hide();        
    }
    });

If you want to hide multible elements I suggest using a class for all elements and $(".allAsterisk").hide();