Для реализации создания точно такого же select-элемента при нажатии на кнопку можно воспользоваться JavaScript. Вот пример кода, демонстрирующего такую реализацию:
HTML:
```html
<button id="addButton">Добавить select</button>
<div id="container"></div>
```
JavaScript:
```javascript
// Получаем кнопку и контейнер
const addButton = document.getElementById("addButton");
const container = document.getElementById("container");
// Обработчик клика по кнопке
addButton.addEventListener("click", function() {
// Создаем новый select-элемент
const select = document.createElement("select");
// Копируем опции существующего select-элемента, если таковой имеется
const existingSelect = container.querySelector("select");
if (existingSelect) {
const options = existingSelect.querySelectorAll("option");
options.forEach(option => {
const newOption = document.createElement("option");
newOption.text = option.text;
newOption.value = option.value;
select.appendChild(newOption);
});
}
// Добавляем созданный select-элемент в контейнер
container.appendChild(select);
});
```
Чтобы перерасположить добавляемый элемент select под уже существующими элементами в ячейке, можно использовать CSS свойство `display: block;` для всех select-элементов в контейнере. Это позволит располагать элементы в вертикальном порядке.
CSS:
```css
select {
display: block;
}
```
Теперь каждый раз при нажатии на кнопку "Добавить select" будет создаваться новый select-элемент, который будет располагаться под уже существующими элементами в ячейке.