javascript - JS: fullpage.js moveTo() among different section -

context:

i'm trying move between different slides within section of fullpage.js clicking 1 of 5 elements.

problem:

the first moveto() - first slide of other 4 works perfectly. however, once on other slide, cannot navigate other slides clicking of elements. appreciated!

my js:

$(document).ready(function() {     // move quality   $( "#q" ).click(function() {       $.fn.fullpage.silentmoveto('why', 1);   });    $( "#d" ).click(function() {       $.fn.fullpage.silentmoveto('why', 2);   });    $( "#p" ).click(function() {       $.fn.fullpage.silentmoveto('why', 3);   });    $( "#z" ).click(function() {       $.fn.fullpage.silentmoveto('why', 4);   });    $( "#e" ).click(function() {       $.fn.fullpage.silentmoveto('why', 5);   });     });     $('#fullpage').fullpage({       css3: true,       sectionscolor: ['white', 'grey', '#fff', '#fff'],       anchors:['m', 'why',],       navigation: true,       navigationposition: 'right',       // verticalcentered:false       // 'navigationtooltips': ['fullpage.js', 'powerful', 'amazing', 'simple'],       // 'showactivetooltip': true,      }    ); 

my html:

<div id="fullpage" class="fullpage-wrapper">      <div class="section" id="section1">     <div class="slide" id="slide1-1">     </div>   <!-- end slide -->   </div>     <!-- start section 2 - why  -->    <div class="section" id="section2">      <div class="slide" id="slide2-1"> <!-- start why  -->         <div class="container-fluid">           <div class="row">             <div class="col-md-12">                 <h2 class="master-side side-default"><span>why ?</span></h2>                 <div class="col-md-8 col-center">                     <a id="q" class="square img-thumbnail"> </a>                     <a id="d" class="square"> </a>                     <a id="p" class="square"> </a>                     <a id="d" class="square"> </a>                     <a id="e" class="square"> </a>                 </div>              </div> <!-- end col-md-12 -->           </div> <!-- end row -->          </div>   <!-- end container -->       </div> <!-- end  why  -->        <div class="slide" id="slide2-2"> <!-- start quality -->           <div class="container-fluid">             <div class="row">               <div class="col-md-12">                   <h2><span>quality</span></h2>                   <div class="col-md-8 col-center">                       <a id="q" class="square img-thumbnail"> </a>                       <a id="d" class="square"> </a>                       <a id="p" class="square"> </a>                       <a id="d" class="square"> </a>                       <a id="e" class="square"> </a>                   </div>               </div> <!-- end col-md-12 -->             </div> <!-- end row -->            </div>   <!-- end container -->         </div> <!-- end quality --> 

don't errors in javascript console?

in code posted there's mistake here:

  // move quality   $( "#q").click(function() {       $.fn.fullpage.silentmoveto('why', 1);   }); 

you forgot close string "#q".

also, can not have more 1 id element same value... can not have 2 <a id="d" class="square"> </a> now.

if that's not problem, should add reproduction of issue online, because otherwise nobody able know problem , therefore how you.