Add options from Pop-Up to Table

Question

I'm in the process of creating a timetable. If I click on a Tables, a pop-up window will open in which the individual subjects are included. If I select an option from there, the pop-up window should close and the selected option should be entered in the table.

HTML

<div class="popup-table">
        <div class="popup-window">
            <div class="close-popup" onclick="closingPopUp()">
                <h4>X</h4>
            </div>
            <p class="options">Deu</p>
            <p class="options">Eng</p>
            <p class="options">Mat</p>
            <p class="options">Erd</p>
            <p class="options">Ges</p>
            <p class="options">Mus</p>
            <p class="options">Kun</p>
            <p class="options">Spo</p>
            <p class="options">Che</p>
            <p class="options">Phy</p>
            <p class="options">Bio</p>
            <p class="options">Fra</p>
            <p class="options">Spa</p>
            <p class="options">Pol</p>
        </div>
    </div>
    
    <div class="table">
        <div class="row headline">
            <p>Std</p>
            <p>Mo</p>
            <p>Di</p>
            <p>Mi</p>
            <p>Do</p>
            <p>Fr</p>
        </div>
        <div class="row extra">
            <p>1</p>
            <p id="selectText" onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
        </div>
        <div class="row">
            <p>2</p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
            <p onclick="openPopUp()"></p>
        </div>

JavaScript

let row = document.querySelectorAll(".row");
let popUp = document.querySelector(".popup-table");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");
let selectText = document.getElementById("selectText");

function openPopUp() {
    popUp.classList.add("show")
}

function closingPopUp() {
    popUp.classList.remove("show")
}

for(option of options){
    option.onclick = function(){
        selectText.innerHTML = this.textContent;
        closingPopUp();
    }
}

The whole thing only works if I assign an Id and not on a Class. But I can only change this one table field.

Maybe someone can help me make this work and I can make a selection individually in each table field.

Answer 1

You could cache the currently active element, please see the example:

let row = document.querySelectorAll(".row");
let popUp = document.querySelector(".popup-window");
let closePopUp = document.querySelector(".close-popup");
let options = document.getElementsByClassName("options");
let activeElement;

function openPopUp(element) {
    popUp.classList.add("show");
    activeElement = element;
}

function closingPopUp() {
    popUp.classList.remove("show");
}

for(option of options){
    option.onclick = function(){
        activeElement.innerHTML = this.textContent;
        closingPopUp();
    }
}

.popup-window {
  display: none;
  position: absolute;
  inset: 0;
  gap: 1em;
  background-color: white;
}

td {
  background-color: lightgrey;
}

.show {
  display: flex;
}

<div class="popup-table">
        <div class="popup-window">
            <div class="close-popup" onclick="closingPopUp()">
                <h4>X</h4>
            </div>
            <p class="options">Deu</p>
            <p class="options">Eng</p>
            <p class="options">Mat</p>
            <p class="options">Erd</p>
            <p class="options">Ges</p>
            <p class="options">Mus</p>
            <p class="options">Kun</p>
            <p class="options">Spo</p>
            <p class="options">Che</p>
            <p class="options">Phy</p>
            <p class="options">Bio</p>
            <p class="options">Fra</p>
            <p class="options">Spa</p>
            <p class="options">Pol</p>
        </div>
    </div>
    
    <table class="table">
        <tr class="row headline">
            <th>Std</th>
            <th>Mo</th>
            <th>Di</th>
            <th>Mi</th>
            <th>Do</th>
            <th>Fr</th>
        </tr>
        <tr class="row extra">
            <td>1</td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
        </tr>
        <tr class="row">
            <td>2</td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
            <td onclick="openPopUp(this)"></td>
        </tr>