how to do 2 destination waypoint shows when we put a address in origin and destination, and the waypoint will be optional

The waypoints direction are working well, I just need to show the directions when we just put a origin address and destination1 address and the destination2 will be an optional.

I'm having a problem that the waypoints direction will only be shown when we put a origin, destination1, and also destination2 address. is there any solution??

    function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.destinationPlaceId2 = null;

  this.travelMode = 'DRIVING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);

  var originInput = document.getElementById('start');
  var destinationInput = document.getElementById('waypoints');
  var destinationInput2 = document.getElementById('end');

  //var modeSelector = document.getElementById('mode-selector');

  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete2 =
      new google.maps.places.Autocomplete(destinationInput);
      destinationAutocomplete2.setFields(['place_id']);

      var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput2);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);




  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');

}

AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
    autocomplete, mode) {
  var me = this;
  autocomplete.bindTo('bounds', this.map);


  autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.place_id) {
      window.alert('Please select an option from the dropdown list.');
      return;
    }
    if (mode === 'ORIG') {
      me.originPlaceId = place.place_id;
    } else if (mode === 'DEST'){
      me.destinationPlaceId = place.place_id;
    }
     else if(mode=== 'DEST2'){
        me.destinationPlaceId2 = place.place_id;
     }


    me.route();
  });
};

AutocompleteDirectionsHandler.prototype.route = function() {
  if (!this.originPlaceId || !this.destinationPlaceId || !this.destinationPlaceId2) {
    return;
  }
  var me = this;

    var waypts = [];
  var checkboxArray = document.getElementsByClassName('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    var address = checkboxArray[i].value;
    if (address !== '') {
      waypts.push({
        location: address,
        stopover: true
      });
    }
  }

  this.directionsService.route(
      {
        origin: {'placeId': this.originPlaceId},
        destination: {'placeId': this.destinationPlaceId},
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: this.travelMode
      },
      function(response, status) {
        if (status === 'OK') {
          me.directionsRenderer.setDirections(response);

// For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }


        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
};

via Chebli Mohamed