Facing issue while passing <td> data to modal in NodeJS

Facing issue while passing <td> data to modal in NodeJS
0

#1

Hi All,

While I was trying to pass

data to modal (where prompting for confirmation takes place), I want to pass the id of that row when button on that row is clicked. But the problem is only id of the first row is getting passed when any of the button is clicked. Attaching the code. Please help!
<div class="row">
            <div class="col-md-12">
            
          
             
              <div id="tbl"><table class="table ">
                  <thead>
                    <tr>
                      <th scope="col"><center>Image</center></th>
                      <th scope="col"><center>Vehicle</center></th>
                      <th scope="col"><center>Local Tariff</center></th>
                      <th scope="col"><center>Outstation Tariff</center></th>
                      <th scope="col"><center>Vehicle Availability</center></th>
                    </tr>
                  </thead>
                  <tbody>
                      <%cabs.forEach(function(cab){%>  
                      <tr>
                          
                          <td><center><img class="images" src="<%=cab.image%>"></center></td>
                          <td><br><center><%=cab.title%></center></td>
                          <td><center><%=cab.lt1%></center><br><center><%=cab.lt2%></center><br><center><%=cab.lt3%></center></td>
                          <td><center><%=cab.ot1%></center> <br> <center><%=cab.ot2%></center> 
                            <td><br><a  class="btn btn-outline-warning my-2 my-sm-0 myBtn btn-block">Book</a></td></td>    
                          
                      
                      </tr>
                      <div id="myModal" class="modal">
              
                          <!-- Modal content -->
                          <div class="modal-content">
                              <span class="close">&times;</span>
                              <h4>Terms and Conditions :</h4><br>
                              <% sample= cab._id;
                          console.log(sample); %>
                          
                          
                                                      
                          <ol>
                            <li>
                              <p>
                                  For Local us
                                  <ul><li>Above 7 hours will be calculated as 10 hours.</li></ul>
                                  <ul><li>Above 12 hours will be calculated as 15 hours.</li></ul>
                                  <ul><li>Time and kms will be calculated from our office and back to our office.</li></ul>
                              </p>
                            </li> 
                            <li><p>
                              For Outstation
                              <ul><li>Minimum 250kms will be calculated.</li></ul>
                              <ul><li>For other state, Parking/Toll, Permit and Entry tax additional.</li></ul>
                              
                          </p></li>
                            <li><p>GST 5% applicable.</p></li>
                              
                            
                          </ol>
                           <a href="/tariff/<%=cab._id%>/tripdetails" id="agree" class="btn btn-primary ">Agree and Continue  <i class="fas fa-check"></i></a>
                            
                          </div>
                      </div>
                      <script>
                          // Get the modal
                          var modal = document.getElementById('myModal');
                          
                          // Get the button that opens the modal
                          
                              var btn = document.getElementsByClassName("myBtn");
                              
                              for(var i = 0; i < btn.length; i++){
                              btn[i].onclick = function() {
                                
                                modal.style.display = "block";
                             
                               
                              }
                          }
                          //var btn = document.getElementsByClassName("myBtn");
                          
                          // Get the <span> element that closes the modal
                          var span = document.getElementsByClassName("close")[0];
                          
                          // When the user clicks the button, open the modal 
                          
                          // When the user clicks on <span> (x), close the modal
                          span.onclick = function() {
                              modal.style.display = "none";
                          }
                          
                          // When the user clicks anywhere outside of the modal, close it
                          window.onclick = function(event) {
                              if (event.target == modal) {
                                  modal.style.display = "none";
                              }
                          }
                          </script>
                      
                      <%});%>
                  </tbody>
                </table>
              </div>
              
              
              
                
          </div>
        </div>
          
              ```
Thanks in advance