Fabric JS object alignment not working as expected - html

Question

I tried to align an object within a group. When I align the first object to the left, center or right it was successful, then I tried for the second object, the first object moved by itself!
Please see the image below (GIF):
Fabric JS Object Alignment
I used HTML5 Canvas, fabric JS & jQuery for the development.
Here is the fiddle: https://jsfiddle.net/mt0ccqq2/
Here is the Code:
$(document).ready(function() {
var canvas = new fabric.Canvas("canvas", { preserveObjectStacking: true });
// create rectangle
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 300,
height: 100,
fill: '#ff0000'
});
// create circle
var text = new fabric.Text("Align Me next", {
left: 190,
top: 320,
fontSize: 20
});
// create text
var text2 = new fabric.Text("Align me first", {
left: 100,
top: 200,
fontSize: 20
});
canvas.add(rect, text, text2);
canvas.renderAll();
// GROUP ON SELECTION
canvas.on("selection:created", function(e) {
var activeObj = canvas.getActiveGroup();
if(activeObj.type === "group") {
console.log("Group created");
var groupWidth = e.target.getWidth();
var groupHeight = e.target.getHeight();
e.target.forEachObject(function(obj) {
var itemWidth = obj.getBoundingRect().width;
var itemHeight = obj.getBoundingRect().height;
// ================================
// OBJECT ALIGNMENT: " H-LEFT "
// ================================
$('#objAlignLeft').click(function() {
obj.set({
left: -(groupWidth / 2),
originX: 'left'
});
obj.setCoords();
canvas.renderAll();
});
// ================================
// OBJECT ALIGNMENT: " H-CENTER "
// ================================
$('#objAlignCenter').click(function() {
obj.set({
left: (0 - itemWidth/2),
originX: 'left'
});
obj.setCoords();
canvas.renderAll();
});
// ================================
// OBJECT ALIGNMENT: " H-RIGHT "
// ================================
$('#objAlignRight').click(function() {
obj.set({
left: (groupWidth/2 - itemWidth/2),
originX: 'center'
});
obj.setCoords();
canvas.renderAll();
});
});
}
}); // END OF " SELECTION:CREATED "
});
Any help would be appreciated. Thanks in advance.

Answer 1

I think this is what you're looking for, right?
Here's the tweak to your code...
canvas.on("selection:cleared", function(e) {
$('#objAlignLeft').off('click');
$('#objAlignCenter').off('click');
$('#objAlignRight').off('click');
});
And here's the all important JSFiddle, https://jsfiddle.net/rekrah/xxrqbhph/.
Let me know if you have any further questions. Happy to help!