SharePoint Online Show/Hide multiple fields based on choice

Question

I have a form similar to the one below, I am using script editor in web parts on SharePoint Online. If I select 'YES' it will reveal a second drop down list hiding 'Item 1'.

If I select 'NO', it will reveal the same list but hiding 'Item 2' and 'Item 3'. It works properly the first time, but if I go back and forth between 'YES' and 'NO' then the second drop down list will hide Item 1,2, and 3.

Is there a way to fix it from filtering multiple times?

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script> 
<script type="text/javascript">
$(document).ready(function(){
   $('nobr:contains("List 2")').closest('tr').hide();  
    //Show/hide columns based on Drop Down Selection 
   $("select[title='List 1']").change(function() {
 
 if ($("select[title='List 1']").val() == "YES") 
   {
     $('nobr:contains("List 2")').closest('tr').show();
     $(":input[title='List 2']").children("option[value='ITEM 1']").hide();
     
   } 
 else if($("select[title='List 1']").val() == "NO") 
   {
     $('nobr:contains("List 2")').closest('tr').show();
     $(":input[title='List 2']").children("option[value='ITEM 2']").hide();
     $(":input[title='List 2']").children("option[value='ITEM 3']").hide();
   }
   
   else  
   {
     $('nobr:contains("List 2")').closest('tr').hide();
   }
   });
});
</script>

Answer 1

Try using below code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('nobr:contains("List 2")').closest('tr').hide();

        //Show/hide columns based on Drop Down Selection 
        $("select[title='List 1']").change(function() {
            //Show all options first
            $(":input[title='List 2']").find("option").show();

            if ($("select[title='List 1']").val() == "YES") {
                $('nobr:contains("List 2")').closest('tr').show();
                $(":input[title='List 2']").children("option[value='ITEM 1']").hide();

            } else if ($("select[title='List 1']").val() == "NO") {
                $('nobr:contains("List 2")').closest('tr').show();
                $(":input[title='List 2']").children("option[value='ITEM 2']").hide();
                $(":input[title='List 2']").children("option[value='ITEM 3']").hide();
            } else {
                //Optional --> Hide all options
                //$(":input[title='List 2']").find("option").hide();
                $('nobr:contains("List 2")').closest('tr').hide();
            }
        });
    });
</script>