Smooth scroll working AND not working

Smooth scroll working AND not working

I have a page with two identical on-page links... one at the top of the page and one at the bottom of the page. Smooth scrolling works with the top link, but not the bottom link. Any ideas what I'm missing? Here's the fiddle link:  http://jsfiddle.net/Codewalker/6or8pwjx/62/

And the code:
  2. <section class="section" id="head">
  3.   <div class="container">
  4.     <h2>CTA</h2>
  5.     <div>
  6.       Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
  7.     </div>
  8.     <div class="cta-btn">
  9.       <a href="#ckav">Check your guitar</a>
  10.     </div>
  11.   </div>
  12. </section>

  14. <section class="section" id="ckav">
  15.    <div class="container test">
  16.       <div class="row">
  17.         <div class="col-sm-12">
  18.           <div class="placeholder-above"></div>
  19.           <div class="guitar-service-address">
  20.             <span class="placeholder-location"><span class="placeholder-float">Find guitar repair specialist. </span><span class="font-alt">Enter your guitar make and model...</span></span>
  21.             <input id="input" type="text" />&nbsp;
  22.           </div>
  23.           <p class="help-block">What is this?</p>

  25.         </div>
  26.       </div>
  27.     </div>
  28. </section>

  30. <section class="section" id="cta">
  31.   <div class="container">
  32.     <h2>CTA</h2>
  33.     <div>
  34.       Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
  35.     </div>
  36.     <div class="cta-btn">
  37.       <a href="#ckav">Check your guitar</a>
  38.     </div>
  39.   </div>
  40. </section>    

  43. $('#input').on("focus", function(){
  44.    $(".guitar-service-address>span.placeholder-location").hide();
  45. });

  47. $(function() {
  48.       $("span.placeholder-location + input").keyup(function() {
  49.         if($(this).val().length) {
  50.             $(this).prev('span.placeholder-location').hide();
  51.         } else {
  52.             $(this).prev('span.placeholder-location').show();
  53.         }
  54.     });
  55.     $("span.placeholder-location").click(function() {
  56.         $(this).next().focus();
  57.     });
  58. });

  60. if ($(window).width() < 768) {
  61.    $(".placeholder-above").append( $(".placeholder-float").text() );
  62. }

  64. const links = document.querySelectorAll(".cta-btn a");

  66. for (const link of links) {
  67.   link.addEventListener("click", clickHandler);
  68. }

  70. function clickHandler(e) {
  71.   e.preventDefault();
  72.   const href = this.getAttribute("href");
  73.   const offsetTop = document.querySelector(href).offsetTop;
  74.   $("input[id$='input']").focus();
  75.   $(".guitar-service-address>span.placeholder-location").hide();
  76.   scroll({
  77.     top: offsetTop,
  78.     behavior: "smooth"
  79.   });
  80. }

  83. .container {
  84.   max-width: 990px;
  85. }

  87. .tab-placeholder {
  88.   display: none;
  89. }

  91. input[id="input"] {
  92.     width: 500px;
  93. }

  95. .guitar-service-address>span.placeholder-location {
  96.   position: absolute;
  97.   margin: 6px 8px;
  98.   color: #686e74;
  99.   cursor: auto;
  100.   font: Helvetica 15px/20px bold;
  101.   font-weight: bold;
  102.   z-index: 1;
  103. }

  105. .guitar-service-address>.placeholder-location>.font-alt {
  106.   color: #686e74;
  107.   font-weight: normal;
  108. }

  110.  input {
  111.   padding: 5px;
  112.   font-size: 11pt;
  113.   color: black;
  114.   border: 1px solid #979797; 
  115.   border-bottom: 4px solid #000;
  116. }

  118. .help-block {
  119.   font-size: 90%;
  120. }

  122. .test {
  123.   padding: 20px;
  124. }

  126. .section {
  127.   padding: 100px 20px;
  128. }

  130. #head {
  131.   background-color: #ddd;
  132.   padding: 10px 20px;
  133. }

  135. #ckav {
  136.   background-color: #d4d4d4;
  137. }

  139. #cta {
  140.   background-color: #fdfd4d;
  141. }

  143. @media (max-width: 768px) { 
  144.   input[id="input"] {
  145.     width: 300px;
  146.   }
  147.   span > .placeholder-float {
  148.    display: none; 
  149.   }
  150.   .tab-placeholder {
  151.    display: block;
  152.   }
  153. }