jQuery selector not selecting a new addClass() length on function but when i  console nodelist[] that is showing the right node length

for see more codes :- [Codepen link][1]

**nodelist after addclass("") =>**
[![nodelist][4]][4]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
    $(document).ready(function(){
    function next(){
        if(i < sections.length -1){
            i++;
            if(i == sections.length -1){
                 $('#next_question').hide();
            }
             $('html, body').animate({
                scrollTop: sections[i].offsetTop,
            }, 500);
        }
    }
    $("input[name='freqTravel']").click(function(){
      var freqTravel = $("input[name='freqTravel']").val();
    if(freqTravel === "yes"){
      $(".optional_Section_yesoptional").show().addClass("Section");
    }
     })
    })

<!-- end snippet -->

  [1]: https://codepen.io/techhjork/pen/gOPGYbO
  [2]: https://i.stack.imgur.com/hNnkP.png
  [3]: https://i.stack.imgur.com/pbEA7.png
  [4]: https://i.stack.imgur.com/XMuFa.png