title: jQuery change active div onClick and with prev next
body: <p>I have built a custom interactive svg map using jQuery and CSS. Everything works perfectly when I click on a map marker, it adds/removes classes to show/hide the relevant content. Now I am trying to add a new feature, Previous and Next buttons to allow a user to change locations in another way. I kind of have it working but after a few clicks it gets gummed up and the wrong divs are selected. Here is what I have so far (some example code for the map markers instead of all the polygon points):</p>
  
  <pre><code>&lt;div id="map-nav"&gt;
    &lt;a class="button prev-tab"&gt;Previous&lt;/a&gt;
    &lt;a class="button next-tab"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="map"&gt;
    &lt;svg&gt;
      &lt;g data-dive="1" class="map-marker current"&gt;1&lt;/g&gt;
      &lt;g data-dive="2" class="map-marker"&gt;2&lt;/g&gt;
      &lt;g data-dive="3" class="map-marker"&gt;3&lt;/g&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;div id="1" class="map-content current"&gt;Content 1&lt;/div&gt;
  &lt;div id="2" class="map-content"&gt;Content 2&lt;/div&gt;
  &lt;div id="3" class="map-content"&gt;Content 3&lt;/div&gt;
  </code></pre>
  
  <p>And the Jquery:</p>
  
  <pre><code>// Jquery Map
    $('.map-marker').click(function(){
          var dive_id = $(this).attr('data-dive');
  
          $('.map-marker').removeClass('current');
          $('.map-content').removeClass('current');
  
          $(this).addClass('current');
          $("#"+dive_id).addClass('current');
      });
  
    // Jquery Map Next Button
    $('.next-tab').click(function() {
     // get current tab
     var currentTab = $('.map-marker.current');
     var currentMap = $('.map-content.current');
  
     // get the next tab, if there is one
     var newTab = currentTab.next();
     var newMap = currentMap.prev();
  
     // at the end, so go to the first one
     if (newTab.length === 0) {
       newTab = $('.map-marker').first();
     }
     if (newMap.length === 0) {
       newMap = $('.map-content').first();
     }
  
     currentTab.removeClass('current');
     currentMap.removeClass('current');
     // add active to new tab
     newTab.addClass('current');
     newMap.addClass('current');
   });
  
   // Jquery Map Prev Button
   $('.prev-tab').click(function() {
     // get current tab
     var currentTab = $('.map-marker.current');
     var currentMap = $('.map-content.current');
  
     // get the previous tab, if there is one
     var newTab = currentTab.prev();
     var newMap = currentMap.prev();
  
     // at the start, so go to the last one
     if (newTab.length === 0) {
       newTab = $('.map-marker').last();
     }
     if (newMap.length === 0) {
       newMap = $('.map-content').last();
     }
  
     currentTab.removeClass('current');
     currentMap.removeClass('current');
     // add active to new tab
     newTab.addClass('current');
     newMap.addClass('current');
   });
  </code></pre>
  
  <p>As I said, the first click function where I am changing markers/content by clicking the marker works perfectly. Its the next and previous buttons not working quite right. I also believe there is probably a much better way to implement the next and previous buttons but this is what I have come up with. Any suggestions for improvement would be much appreciated.</p>