Как остановить jQuery TourBus от создания двух экземпляров при нажатии?

Я использую jQuery Tourbus, чтобы направлять пользователя через мой сайт. Я хочу, чтобы он отображался при загрузке окна при первом посещении, но после этого он не должен загружаться, если пользователь не нажимает на значок информации.

Чтобы убедиться, что он загружается автоматически, только когда пользователь впервые появляется, я сделал это –

• Перезагружайте данные AJAX каждые X минут / секунд, jQuery
• Час AJAX, окно автоматической прокрутки
• JQuery, перетаскивание и сохранение в базу данных mysql?
• jQuery datepicker с php и mysql
• Вызов функции jquery с php-страницы

<?php if($tourbus_verify==0) { ?> <script type="text/javascript"> $(window).load( function() { var tour = $('#my-tour-id').tourbus( {} ); tour.trigger('depart.tourbus'); } ); </script> <?php } ?> 

При загрузке страницы у меня есть метод, который вводит значение 1 в базу данных. Итак, если пользователь впервые посещает, $tourbus_verify будет 0 , поэтому тур загружается, когда страница загружается. Если пользователь уже посетил страницу раньше, то $tourbus_verify будет равен 1 чтобы он не загружался автоматически.

Тур, который он загружает, выглядит следующим образом:

 <ol class='tourbus-legs' id='my-tour-id'> <li data-orientation='centered' data-width='400'> <p>Hello</p> <a href='javascript:void(0);' class='tourbus-next'>Next</a> </li> <li data-el='#stuff' data-orientation='top' data-width='400'> <p>That's awesome</p> <a href='javascript:void(0);' class='tourbus-prev'>Previous</a> <a href='javascript:void(0);' class='tourbus-next'>Next</a> </li> <li data-el='#tourbus-restart' data-orientation='left' data-width='400'> <p>Bye</p> <a href='javascript:void(0);' class='tourbus-stop'>End!</a> </li> </ol> 

Пока все работает хорошо. Теперь у меня есть значок, который после нажатия загружает тур –

 <div class="row-fluid"> <span style="cursor: pointer;" id="tourbus-restart"> <i class="fa fa-info" aria-hidden="true"></i> </span> </div> 

И в конце страницы у меня есть –

 <script type="text/javascript"> $("#tourbus-restart").click(function(){ var tourclick = $('#my-tour-id1').tourbus( {} ); tourclick.trigger('depart.tourbus'); }); </script> 

Это загружает ту же поездку, что и раньше, но с другим ID –

 <ol class='tourbus-legs' id='my-tour-id1'> <li data-orientation='centered' data-width='400'> <p>Hello</p> <a href='javascript:void(0);' class='tourbus-next'>Next</a> </li> <li data-el='#stuff' data-orientation='top' data-width='400'> <p>That's awesome</p> <a href='javascript:void(0);' class='tourbus-prev'>Previous</a> <a href='javascript:void(0);' class='tourbus-next'>Next</a> </li> <li data-el='#tourbus-restart' data-orientation='left' data-width='400'> <p>Bye</p> <a href='javascript:void(0);' class='tourbus-stop'>End!</a> </li> </ol> 

По какой-то причине это работает хорошо один раз, но во второй раз запускает дополнительный экземпляр тура, поэтому я заканчиваю запуск двух туров одновременно, как показано на изображении ниже –

Поэтому, чтобы завершить тур, я должен дважды щелкнуть каждый Next . Кто-нибудь знает, что может быть причиной этого? Благодаря!