Here is my fiddle https://jsfiddle.net/juggernautsei/w8yn2ehk/

    $(function() {

        $("input[name$='notify_type']").click(function() {

            var test = $(this).val();

    var selected = $("input[type='radio'][id='notify_type3']:checked").val();

            $("div.referral").hide();

            $("#ref" + test).show();

   if(selected == "4") var opts = [

            {name: "Please Select", val:""},

            {name:"WMOX", val:"WMOX"},

            {name:"WVKL", val:"WVKL"},

            {name:"WJDQ", val:"WJDQ"},

            {name:"WOWI", val:"WOWI"},

            {name:"WTOK", val:"WTOK"}

        ];

          else if(selected == "3") var opts = [

                    {name:"Please Select", val:""},

                    {name:"ABC Channel 23", val:"ABC Channel 23"},

                    {name:"CBS Channel 41", val:"CBS Channel 41"},

                    {name:"UPN Channel 489", val:"UPN Channel 489"},

                    {name:"ESPN Channel 314", val:"ESPN Channel 314"}

                ];

On the left is a list of referral types. I want the block on the left to change depending on the type of referral that is selected. Most of that is accomplished.

What I want to happen is notify_type3 should populate the dropdown list on the right according to the list type selected on the left. The first one works correctly. The rest do not. I think I need an on change but not sure where to place it.

Also, fiddle is saying that opts already defined but when I remove the var from the remaining opts. It then changes to say that opts is out of scope.