is there a way to handle a click event whithout assigning id?

i have a webpage full of buttons , for opening a modal with a description related to the button..
the webpage is for mobile repair service requests…

<div class="hyperclicks">
                <p class="click" id="click1" onclick="showhidesector('sector1','click1')">Udskiftning af Skærm</p>
            <p class="click" id="click2" onclick="showhidesector('sector2','click2')">Udskiftning af Batteri</p>
            <p class="click" id="click3" onclick="showhidesector('sector3','click3')">Udskiftning af Bagglas</p>
            <p class="click" id="click4" onclick="showhidesector('sector4','click4')">Udskiftning af Højtaler</p>
            <p class="click" id="click5" onclick="showhidesector('sector5','click5')">Udskiftning af Kamera</p>
            <p class="click" id="click6" onclick="showhidesector('sector6','click6')">Udskiftning af Ladestik</p>
            <p class="click" id="click7" onclick="showhidesector('sector7','click7')">Udskiftning af knapper</p>
            <p class="click" id="click8" onclick="showhidesector('sector8','click8')">Udskiftning af Vibrator</p>
            <p class="click" id="click9" onclick="showhidesector('sector9','click9')">Ander</p>
            <p class="click" id="click10" onclick="showhidesector('sector10','click10')">Tilbehør</p>
            </div>

there is ten sectors , and for each of them it will show another div with description and details

<div class="sector" id="sector1">
                <div class="priceflex">
                    
                    <p>Original Kvalitet </p><p class="priceitem">2299.99,-</p>
                    </div>              
                <div class="priceflex">
            <p>TopKvalitet </p><p class="priceitem">1199.99,-</p>
                    </div>
                    <div class="priceflex">
            <p>KobiKvalitet  </p><p class="priceitem">799.99,-</p>
                    </div>
                    
            </div>

i’m using this code to show and hide each div(sector)

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var btnClose = document.getElementById("btnClose");

var divState = {};
function showhidesector(id,id2) {
    if (document.getElementById) {
        var divid = document.getElementById(id);
        divState[id] = (divState[id]) ? false : true;
        for (var div in divState){
            if (divState[div] && div != id){ 
                document.getElementById(div).style.display = 'none'; // hide
                divState[div] = false; 
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

so my question is , is there anyway to achieve this without assigning id’s for each element ?
because i have to create a modal for every mobile device (about 120 devices)

>Solution :

You can simplify your code by using querySelectorAll() to retrieve all the p.click elements, then looping through them to add the same event handler to each one.

The related sector can targeted by using a data attribute to store the selector for each element. Try this:

document.querySelectorAll('p.click').forEach(el => {
  el.addEventListener('click', e => {
    let sectorId = e.target.dataset.sectorid;
    document.querySelector(sectorId).classList.toggle('show');
  });
});

.sector { display: none; }
.sector.show { display: block; }

<div class="hyperclicks">
  <p class="click" id="click1" data-sectorid="#sector1">Udskiftning af Skærm</p>
  <p class="click" id="click2" data-sectorid="#sector2">Udskiftning af Batteri</p>
  <!-- other p elements here... -->
</div>

<div class="sector" id="sector1">
  <div class="priceflex">
    <p>Original Kvalitet (SECTOR 1)</p>
    <p class="priceitem">2299.99,-</p>
  </div>
  <div class="priceflex">
    <p>TopKvalitet </p>
    <p class="priceitem">1199.99,-</p>
  </div>
  <div class="priceflex">
    <p>KobiKvalitet </p>
    <p class="priceitem">799.99,-</p>
  </div>
</div>

<div class="sector" id="sector2">
  <div class="priceflex">
    <p>Original Kvalitet (SECTOR 2)</p>
    <p class="priceitem">199.99,-</p>
  </div>
  <div class="priceflex">
    <p>TopKvalitet </p>
    <p class="priceitem">299.99,-</p>
  </div>
  <div class="priceflex">
    <p>KobiKvalitet </p>
    <p class="priceitem">399.99,-</p>
  </div>
</div>