Popup isn't displaying correctly-CodePudding

I am trying to create a popup on the 1's which are present in this table. I want different popup for different 1 value(data could be the same). But now what is happening that if I click on any 1 it just opens the first 1's popup. It is happening because the id of each span is the same. But if I change the span id and try to create the another function then the pop up functionality doesn't work.

Can someone please suggest me a way through which I can achieve this either using jquery or html,css. I have searched a lot on google but couldn't able to find something relatable. Moreover, I am doing this thing in ASP.net


        <style>
        .popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
    </style>

Table:

    <table border="1">
        <tr style= "background-color: #eee;">
                <th scope="col" style="width: 90px">Date</th>
                <th scope="col">09:00</th>
                <th scope="col">09:30</th>
                <th scope="col">10:00</th>
                <th scope="col">10:30</th>
                <th scope="col">11:00</th>
                <th scope="col">11:30</th>
                <th scope="col">12:00</th>
                <th scope="col">12:30</th>
                <th scope="col">13:00</th>
                <th scope="col">13:30</th>
                <th scope="col">14:00</th>
                <th scope="col">14:30</th>
                <th scope="col">15:00</th>
                <th scope="col">15:30</th>
                <th scope="col">16:00</th>
                <th scope="col">16:30</th>
                <th scope="col">17:00</th>
                <th scope="col">17:30</th>
                <th scope="col">18:00</th>
            </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
        <tr>  
                    <td>26-11-2021</td>
                    <td>0</td>  
                    <td>0</td>  
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>
                        <div class="popup" onclick="myFunction()">1
                        <span class="popuptext" id="myPopup">
                        Customer name : Neeraj
                        Customer Number : 1234567890
                        Contact Date & Time : 11/25/2021 14:04
                        Agent Name
                        </span>
                        </div>
                    </td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                    <td>0</td> 
                </tr>
    </table>

    <script>
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
    </script>

CodePudding user response：

You just need a method to remove the show class from all popup text elements before you open the new one. You can also eliminate the need for having a single function for each of your popup elements, by using one function and passing an argument to it for the popup it's to trigger.

Kindly review this answer in the StackOverflow:

How to make only 1 popup open at a time?

Here is the answer to your answer

CodePudding user response：

Try this,

$(window).ready(function () {
        $(document).on('click','.popup',function () {
            var popup = $(this).closest('.popuptext');
            popup.show();
        });
    });

ID is not necessary. Try accessing it with class.