How do I flush out previous layers created by leaflet draw tool without refreshing page?

I want to give access to a leaflet draw toolbar via a toggle style menu link so a user can draw one rectangle at a time (actually these will be inserted into a database). What I managed so far is user can toggle on the toolbar, draw a rectangle and when finished toggle off the toolbar, which is fine, but when the user does this a second time (i.e. toggle the toolbar on again) the quantity of rectangles drawn increases. I cant work out why. Can someone explain and offer a solution. The requirement is to generate one rectangle each time the toolbar is enabled.

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
}).addTo(map);


var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
    position: 'topright',
    draw: {
            polyline: false,
            circle: false,
            marker: false,
            polygon: false,
            rect: {
                    shapeOptions: {
                            color: 'green'
                    },
            }
    }
});

var step1Enabled = 0;
$('#step1').click(function(){
      if (step1Enabled){
          map.removeControl(drawControl);
          step1Enabled = 0;
      }else{
          step1Enabled = 1;
          map.addControl(drawControl);
          map.on('draw:created', function (e) {
                  var type = e.layerType,
                          layer = e.layer;

                  if (type === 'rectangle') {
                      console.log(type, ' drawn');
                  }
          });
      }
});