Не вижу причин, по которым цвета должны быть классами. Замените на data-атрибуты:
<div data-color="black"></div>
<div data-color="white"></div>
document.addEventListener('click', ({ target: { dataset: { color } } }) => {
if (color) {
document.querySelector('button').dataset.id = color;
}
});
// или
const button = document.querySelector('button');
const onClick = e => button.dataset.id = e.target.dataset.color;
document.querySelectorAll('[data-color]').forEach(n => n.addEventListener('click', onClick));
// или
$('[data-color]').click(function() {
$('button').attr('data-id', $(this).data('color'));
});