Можно ли получить идентификатор div элемента родительского блока в одной колонке и использовать его в значении?

Здравствуйте!

Вы можете упростить поддержку и изменение внешнего вида вашего приложения, используя динамическое создание элементов и обработку событий. Таким образом, вам не нужно будет менять код для каждой кнопки вручную при изменении интерфейса. Вот несколько рекомендаций, как это можно сделать:

### 1. Используйте шаблонизацию

Вместо статического написания HTML-шаблонов для каждой кнопки, можно создать шаблон, который будет принимать параметры и динамически генерировать нужные элементы. Например:

```javascript
function createButton(id, text, room) {
    const form = document.createElement('form');
    form.id = id;

    const button = document.createElement('button');
    button.className = 'btn';
    button.type = 'submit';
    button.innerHTML = `<svg>...</svg>`; // Замените на необходимый SVG

    const inputText = document.createElement('input');
    inputText.type = 'hidden';
    inputText.name = 'text';
    inputText.value = text;

    const inputAction = document.createElement('input');
    inputAction.type = 'hidden';
    inputAction.name = 'Action';
    inputAction.value = 'Command';

    const inputRoom = document.createElement('input');
    inputRoom.type = 'hidden';
    inputRoom.name = 'Room';
    inputRoom.value = room;

    form.appendChild(button);
    form.appendChild(inputText);
    form.appendChild(inputAction);
    form.appendChild(inputRoom);

    return form;
}

// пример использования
const container = document.querySelector('.col-4');
const newButton = createButton('aliceplaystop', 'Пауза', 'Детская');
container.appendChild(newButton);
```

### 2. Делегированное событие

Для обработки событий кнопок используйте делегированное событие. Это позволяет не привязывать отдельные обработчики к каждой кнопке, а обработать событие на уровне родительского элемента:

```javascript
document.querySelector('.col-4').addEventListener('submit', function(event) {
    event.preventDefault(); // предотвратить отправку формы

    const form = event.target;
    const text = form.querySelector('input[name="text"]').value;
    const action = form.querySelector('input[name="Action"]').value;
    const room = form.querySelector('input[name="Room"]').value;

    // отправьте данные на сервер через AJAX
    console.log({ text, action, room });
});
```

### 3. Гибкое размещение элементов

Для изменения структуры элементов можно легко манипулировать DOM при помощи JavaScript. Например, при изменении интерфейса вы можете удалить старые элементы и создать новые, используя вышеупомянутую функцию `createButton`.

### 4. Используйте CSS классы для стилей

Если вы хотите изменить внешний вид кнопок, лучше всего организовать CSS-классы, которые будут описывать разные состояния и стили элементов. Это облегчит процесс стилизации:

```css
.btn {
    /* общие стили для кнопок */
}

.btn.primary {
    /* стили для кнопок с основным действием */
}

.btn.secondary {
    /* стили для второстепенных кнопок */
}
```

Таким образом, подход с динамическим созданием элементов и обработкой событий упростит вам работу, сделает код более гибким и технически чистым. Вы сможете легко добавлять, изменять или удалять элементы, не беспокоясь о большой части кода.

Батенька, вы уже дозрели до перехода от статичного html к его динамической генерации. <br/> Можно по классике возложить эту задачу на бакенд, а можно динамически собирать html из javascript. <br/> <br/> Но в обоих подходах потребуется понять, что вам не нужно кучу разных однотипных переменных. <br/> Да и сам подход стоит поменять. <br/> например кнопки оключить/подключить интернет. <br/> <pre><code>&lt;button class="...  mySwithInet .... "  data-status="on/off"  data-device="alisa-1"&gt;Отключить интернет&lt;/button&gt;</code></pre> <br/> по псевдоКлассу mySeitchInet навешивается слушатель нажатия. Аргументы(data-) можно получить так <br/> <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Howto/Use_data_attributes" rel="nofollow">https://developer.mozilla.org/ru/docs/Learn/HTML/H...</a> <br/> <br/> можно использовать parentElement, чтобы id устройства не писать кучу раз <br/> <a href="https://www.w3schools.com/jsref/prop_node_parentelement.asp" rel="nofollow">https://www.w3schools.com/jsref/prop_node_parentel...</a> <br/> <br/> когда вы повесили слушателя, то внутри функции this будет указывать на нажатый элемент.  И все остальное ищете через него.