jquery prev issues when working with a dropdown list

Question

This is my first question in here, so any direction for making a better ask is appreciated, and of course any help even more so. :-)

I am working with Drupal behaviors and jquery to setup navigation for a long form. (Form is created using entityform)

I have three dropdowns (One on the top, one in a side bar and one below the form) that the user can use to navigate from one "page" to another. The dropdown at the bottom also includes prev and next buttons.

My issue is that all the bottom dropdown and prev and next buttons are not working properly. The issues are as follows:

• When selecting an element from the bottom dropdown list it doesn't change the content (Adding and removing class hidden). The top and side dropbar works
• When clicking next I am taken to the next page. However, when I click prev I am taken to the first page and the next button also no longer works.

I have tried to create a JSfiddle It has the correct HTML markup, but I cannot get the JS to work, maybe because it was made for drupal behaviors. A live version can be found here. I have experimented with prevAll() and nextAll(), instead of prev() and next() but not getting any improvements. And I am pretty lost on why the bottom dropdown doesn't work when the others are.

Html Markup

<div class="preform">
  <select id="topnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
</div>
<div id="form">
  <div class="row">
    <div class="col1">
      <div class="page">
        <h3>title1</h3>
        [some content]  
      </div>
      <div class="page">
        <h3>title2</h3>
        [some content]
      </div>
      <div class="page">
        <h3>title3</h3>
        [some content]
      </div>
    </div>
    <div class="col2">
      <div class="static">
        <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
      </div>
    </div>
  </div>
</div>
<div id="form-nav">
  <input value="Previous" type="button" class="btn btn-default" id="buttonPrev">
  <select id="bottomnav" class="navdrop">
    <option>title1</option>
    <option>title2</option>
    <option>title3</option>
  </select>
  <input value="Next" type="button" class="btn btn-default" id="buttonNext">
</div>

jquery that runs once on page load to setup start conditions

 $('#edit-actions',context).once('gotButtons', function() {

    /* hides pages and shows welcome page on first load */
    $(".page").addClass("hidden");
    $("h3:contains('title1')").parent().removeClass("hidden");
    $("#buttonPrev",context).prop('disabled', true);
    $(".nav-drop > option:selected").attr("selected","selected");

  });

jquery on change of dropdown event

$(".nav-drop",context).change(function() {
    /* hides everything */
    $(".page").addClass("hidden");

    /* unhides the selected item */
    var item = this.value;
    $('.page h3').filter(function(){ 
      return($(this).text() == item);
    }).parent().removeClass("hidden");

    /* update all dropdowns to the chosen value */
    $(".nav-drop",context).val(item);

    /* Disable first and last button */
    var isFirstElementSelected = $('#topnav > option:selected').index() === 0;
    var isLastElementSelected = $('#topnav > option:selected').index() == $('#topnav > option').length -1;

    if (isFirstElementSelected) {
      $("#buttonPrev",context).prop('disabled', true);
      $("#buttonNext",context).prop('disabled', false);
    } else if (isLastElementSelected) {     
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', true);
    } else {
      $("#buttonPrev",context).prop('disabled', false);
      $("#buttonNext",context).prop('disabled', false);
    }
  });

jquery for button clicked

/* Adds next/prev functionality */
  $("#buttonNext").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');  

    $(".nav-drop",context).trigger("change");
  });

  $("#buttonPrev").click(function() {
    $('.nav-drop > option:selected').removeAttr('selected').prevAll('option').attr('selected', 'selected');

    $(".nav-drop",context).trigger("change");
  });

Thank you for your help in advance!