Can you rewrite this code so that the user can pick up multiple same colored rectangles with one click?

function pickRectangle(event) {
if(click === 0){
const gameBoard = document.getElementById(‘game-board’);
const boardRect = gameBoard.getBoundingClientRect();
const columnWidth = gameBoard.offsetWidth / boardWidth;
const columnIndex = Math.floor((event.clientX - boardRect.left) / columnWidth);
const draggedRectangle = [];
draggedRectangle = getColoredRectangles(columnIndex);

// Find the bottom-most empty row in that column
const rectangles = document.getElementsByClassName(‘rectangle’);
const rectangleColor = draggedRectangle[0].style.backgroundColor;
draggedRectangle.style.backgroundColor = ‘’;
for (let row = boardHeight - 1; row >= 0; row–) {
const index = row * boardWidth + columnIndex;
const rectangle = rectangles[index];

if (!rectangle.style.backgroundColor) {
rectangle.style.backgroundColor = rectangleColor;
draggedRectangle = rectangle;
if(draggedRectangle.count === 0){
break;
}
}
}

document.addEventListener(‘mousemove’, dragRectangle);
click = 1;
}

else if (click === 1) {

// Find the column that the mouse is in
const gameBoard = document.getElementById(‘game-board’);
const boardRect = gameBoard.getBoundingClientRect();
const columnWidth = gameBoard.offsetWidth / boardWidth;
const columnIndex = Math.floor((event.clientX - boardRect.left) / columnWidth);

// Find the bottom-most empty row in that column
const rectangles = document.getElementsByClassName(‘rectangle’);
const rectangleColor = draggedRectangle.style.backgroundColor;
draggedRectangle.style.backgroundColor = ‘’;
let rectanglePlace = getLastNonColoredRectangle(columnIndex);
rectanglePlace.style.backgroundColor = rectangleColor;
const rectangleIndex = Array.from(rectangles).indexOf(rectanglePlace);

click = 0;

document.removeEventListener(‘mousemove’, dragRectangle);
checkConnectedRectangles(rectangleColor, rectangleIndex);
}
}


function dragRectangle(event) {
if (draggedRectangle) {
draggedRectangle.style.left = event.clientX - draggedRectangle.offsetWidth / 2 + ‘px’;
draggedRectangle.style.top = event.clientY - draggedRectangle.offsetHeight / 2 + ‘px’;
}
}

function getLastNonColoredRectangle(columnIndex) {
const rectangles = document.getElementsByClassName(‘rectangle’);
let lastNonColoredRectangle = null;

for (let row = 0; row < boardHeight; row++) {
const index = row * boardWidth + columnIndex;
const rectangle = rectangles[index];

if (!rectangle.style.backgroundColor) {
lastNonColoredRectangle = rectangle;
break;
}
}

return lastNonColoredRectangle;
}

function getColoredRectangles(columnIndex) {
const rectangles = document.getElementsByClassName(‘rectangle’);
const coloredRectangles = [];

for (let row = boardHeight - 1; row >= 0; row–) {
const index = row * boardWidth + columnIndex;
const rectangle = rectangles[index];

if (rectangle.style.backgroundColor) {
let rectangleColor = rectangle.style.backgroundColor;
coloredRectangles.push(rectangle);
if(rectangleColor !== “” && rectangle.style.backgroundColor === rectangleColor){
coloredRectangles.push(rectangle);
}else if(rectangeColor != null && rectangle.style.backgroundColor !== rectangleColor){
break;
}
}


}

return coloredRectangles;
}