Re draw a rectangle in leaflet
<p>If I have a map and I draw a rectangle like this:
map.setView([14.378300, 24.904200], 5);</p>

<pre><code>var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 17,
    attribution: '&amp;copy; &lt;a href="http://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt;'
});
tileLayer.addTo(map);


var rectangle = L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);
</code></pre>

<p>But on another button click I want to re define (re draw) rectangle parameters in another form.
like this: </p>

<pre><code>$( ".select" ).click(function() {
rectangle =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
map.addLayer(rectangle);
});
</code></pre>

<p>Is this possible? Please, somebody help me :( </p>

<p><a href="http://jsfiddle.net/y1nb7sow/#&amp;togetherjs=Tmxt9h1aCL" rel="nofollow">MY JSFIDDLE is here</a></p>

<p>EDIT:</p>

<p>I tried to do it like this when I defined two rectangles, and I defined two an on event for the second one, but I get this error  <code>Uncaught TypeError: rectangle2.on is not a function</code> can you help me please?</p>

<pre><code>var rectangle, rectangle2;
rectangle =L.rectangle([  [21.616579,  29.487305], [7.798079, 20.522461]]);
map.addLayer(rectangle);

rectangle.editing.enable();

// Every time we move the selected area, refresh data about the selected area.
rectangle.on('edit', function() { 
    onRectangleChange(this);
});
rectangle2.on('edit', function() { 
    onRectangleChange(this);
});

$( ".select" ).click(function() {
    rectangle.editing.disable();    
    map.removeLayer(rectangle);
    rectangle2 =  new L.rectangle([  [17.853290, 34.980469], [10.876465, 14.853516]]);
    map.addLayer(rectangle2);
    rectangle2.editing.enable();
});
</code></pre>