function get_hh_mm ( value ) {
        var hh = new Date(value).getHours(),
            ampm = "PM",
            mm = new Date(value).getMinutes();
        if ( hh < 12 ) { ampm = "AM";
        } else { hh -= 12; }
        hh = ( hh === 0 ) ? "12" : hh;
        hh = ( hh < 10 ) ? "0" + hh : hh;
        mm = ( mm < 10 ) ? "0" + mm : mm;
        return hh + ":" + mm + " " + ampm;
    }
    var AddApptMins = function ( StartTime, Duration ) {
        var epoch_time = new Date("Jan 1, " + new Date().getFullYear() + " " + StartTime).getTime() + Duration * 60000;
        return get_hh_mm ( epoch_time );
    }
    function init() {
        var last_time = ""
            earliest_time = '08:00 AM',
            latest_time = '09:45 PM';
        $("body").data("alltimes", [ earliest_time ]);
        for (var t = 0; t <= 80; t += 1) {  
            last_time = AddApptMins($("body").data("alltimes")[$("body").data("alltimes").length-1], 15);
            $("body").data("alltimes").push(last_time);   
            if ( last_time === latest_time ) { break; }
        }  
        $('input#starttime').menuoptions({
                                        "Data": $("body").data("alltimes"),
                                        "Filters": [{'AM':'AM'},{'PM':'PM'}],
                                        "ClearBtn": true,
                                        "onSelect": function(e, data) { 
                                            ResetEndTimeData(data.newVal); 
                                        }, 
                                        "Mask" : 'HH:MM AM',
                                        "ColumnCount": 4,
                                        "Width": 300,
                                        "Height": 200,
                                        "Sort": []
                                        });
        $('input#endtime').menuoptions({
                                        "Data": $("body").data("alltimes"),
                                        "Filters": [{'AM':'AM'},{'PM':'PM'}],
                                        "ClearBtn": true,
                                        "Mask" : 'HH:MM AM',
                                        "ColumnCount": 4,
                                        "Width": 300,
                                        "Sort": []
                                        });
        $('button#menutest').off('click').on('click', function (e) {
            var tst = $('input#starttime').menuoptions('re_serialize',$('form#tst').serialize()); 
            alert (tst);
        });
    }
    function ResetEndTimeData( startTime ) {
          var end_time = $('input#endtime');
          /*--  clear out the existing end time array  --*/
          $("body").data("endtimes", []);
          /*--  change end time choices to be up to 90 minutes later   --*/
          for (var t = 0; t <= 90; t += 5) { 
            $("body").data("endtimes").push(AddApptMins(startTime, t)); 
          } 
          /*--  refresh the Data for the endtime and remove filters (AM|PM)   --*/
	      $('input#endtime').menuoptions({ 'Data'    : $("body").data("endtimes"),
                  'Filters' : [],
                  'ColumnCount' : 4,
                  'Width' : 300 });
    }
    init();
   
            

            
        <div class="col-md-8 col-xs-8">
            <form id=tst>
            <div class="row">
                <div class="col-lg-4" style="height:60px"></div>
                <div class="col-lg-8 text-center" style="height:60px">
                    <input type=text class="form-control" name=starttime id='starttime' placeholder='Start time' >
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4" style="height:60px"></div>
                <div class="col-lg-8 text-center" style="height:60px">
                    <input type=text  class="form-control" name=endtime id='endtime'  placeholder='End time'>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4" style="height:60px"></div>
                <div class="col-lg-8" style="height:60px">
                      <button class="a" tooltip="see results" id=menutest>Show values</button>
                </div>
            </div>
            </form>
          </div> <!--  column 2 (main)  -->
          
        

            
  <!--//  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>  //-->
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>  
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">  
 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <script src="../dist/js/jquery.menuoptions.js?v_1820"></script>
  <link rel="stylesheet" href="../dist/css/menuoptions.css?v_1820">
  <link rel="stylesheet" type="text/css" href="css/style.css?v_2339">