Pass value in Bootstrap

Question

Below is bootstrap code for displaying tune list. upon clicking tag in first code it goes to #tuneIDModal, that code is also mentioned below. I want to pass value from hyperlink tag(data-myvalue) to #tuneIDModal(replacing value with 291033).Both the codes are on same page. Can anyone help me how i can implement.

Homepage.jsp

<!-- Code to show Tune List -->

<div class="item">
 <div class="htt-wrap" data-url="downloadfile.jsp?filename=<%=rs1.getString("tnumber")%>.mp3">
  <img src="assets/img/desktop_top_tune_01.png" alt="01" />
   <div class="item-desc">
     <div class="item-desc-top">
     <h4><%=rs1.getString("data1")%></h4>
 <h6><%=rs1.getString("data2")%></h6>
 <span>Tune ID: <%=rs1.getString("tnumber")%></span>
</div>
<div class="item-desc-bottom">
 <div class="item-desc-left">
  <img class="img-fluid db-play" src="assets/img/play.svg" alt="">
 </div>
 <div class="item-desc-right">
  <a href="#" class="db-modal" data-toggle="modal" data-target="#tuneIDModal" data-myvalue="<%=rs1.getString("tunenumber")%>">
   <img class="img-fluid" src="assets/img/dots.svg" alt="">
  </a>
   </div>
  </div>
  </div>
 </div>
</div>




<!-- details for Tune -->

<div class="modal fade" id="tuneIDModal" tabindex="-1" aria-labelledby="tuneIDModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  <div class="modal-content">
   <div class="modal-header">
    <div class="db-modal-header-img">
     <img src="assets/img/modal-img.png" alt="" class="img-fluid">
    </div>
    <div class="db-modal-header-content">
     <h4>Tune name</h4>
     <h6>xyz</h6>
     <span>TID: 291033</span>
    </div>
    <div class="db-modal-header-controls play-modal">
     <img src="assets/img/play.svg" alt="" class="img-fluid db-play">
    </div>
    </div>
   </div>
  </div>
</div>

Answer 1

You can write click event so whenever your .db-modal is clicked get value of attr and add that value inside span tag inside modal using .text("yourvalue").

Demo Code :

//on click of button
$(document).on("click", ".db-modal", function() {
//replcae value inside modal span
  $("#tid_modal").text("TID : " + $(this).attr("data-myvalue"))
})

<!-- Code to show Tune List -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="item">
  <div class="htt-wrap" data-url="downloadfile.jsp?filename=111.mp3">
    <img src="assets/img/desktop_top_tune_01.png" alt="01" />
    <div class="item-desc">
      <div class="item-desc-top">
        <h4>
          somwthing
        </h4>
        <h6>
          somwthing 11
        </h6>
        <span>Tune ID:111</span>
      </div>
      <div class="item-desc-bottom">
        <div class="item-desc-left">
          <img class="img-fluid db-play" src="assets/img/play.svg" alt="">
        </div>
        <div class="item-desc-right">
          <a href="#" class="db-modal" data-toggle="modal" data-target="#tuneIDModal" data-myvalue="111"> click
            <img class="img-fluid" src="assets/img/dots.svg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>




<!-- details for Tune -->

<div class="modal fade" id="tuneIDModal" tabindex="-1" aria-labelledby="tuneIDModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div class="db-modal-header-img">
          <img src="assets/img/modal-img.png" alt="" class="img-fluid">
        </div>
        <div class="db-modal-header-content">
          <h4>Tune name</h4>
          <h6>xyz</h6>
          <!--given id here-->
          <span id="tid_modal">TID: 291033</span>
        </div>
        <div class="db-modal-header-controls play-modal">
          <img src="assets/img/play.svg" alt="" class="img-fluid db-play">
        </div>
      </div>
    </div>
  </div>
</div>