[madeas]

Привет всем! Нужна помощь со скриптом.

Есть примерно 10 кнопок (могут добавляться), каждая из которых присваивает контейнеру с классом .bSm определенные свойства:

$('#1').click(function() {
  $('.bSm').toggleClass('one');
});
$('#2').click(function() {
  $('.bSm').toggleClass('two');
});
$('#3').click(function() {
  $('.bSm').toggleClass('three');
});
...

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.bSm {
  display: block;
  background: #fff;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  margin: 0 auto;
}
.two {
  width: 450px;
  height: 675px;
  border-radius: 38px;
}
.three {
  width: 267px;
  height: 553px;
  border-radius: 18px;
}
</style>
<div class="bSm"></div>

<button id="1"></button>
<button id="2"></button>
<button id="3"></button>
<button id="4"></button>
...

<div class="bSres"></div>

Проблема в том, что код получится большой, а при повторном нажатии любой кнопки, свойства откатываются до предыдущего нажатия.

Задача:
- сократить код (если это возможно)
- исправить нажатие кнопок
- вывести в контейнер с классом .bSres результат, т.е. все полученные параметры. Например, я составил контейнер <div class="bSm two three"></div>, то и в результате должны быть все параметры, а повторные (вроде width) заменялись на последние:

<div class="bSm two three"></div>
<style>
.bsm.two.three {
  display: block;
  background: #fff;
  width: 267px;
  height: 553px;
  border-radius: 18px;
  margin: 0 auto;
}
</style>