Fetch data from div with javascript-CodePudding

I have a list of movies with their infos and what I want to do is to fetch available days with javascript and then add those infos to the div in modal. This is my code:

  <div>
  {% for movie in movies %}
    <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>

    <h3> 'This movie is available on:' </h3>
    <div class="days">
    {% for day in movie.field_days %}
    {{day.entity.label}}
    {% endfor %}
    </div>
    <br>
    <button id="b" class="bclass" style="visibility:hidden"> Reserve</button>
    </div>
  {% endfor %}
   
  </div>


<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Available days for this movie are:</h4>
    <div class= "modal-body">
     <div class=days></div>
    </div>
  </div>

</div>

I want to fetch {{day.entity.label}} and then add that to the div in modal. Can someone help? Thanks in advance.

CodePudding user response：

Here is a demo, i didn't include the modal library, but it doesn't matter, you just need to uncomment that last line, you can see the modal content at the bottom when you click reserve

$(".bclass").click(function (e) {
  var movie = e.target.closest(".movie");
  var days = movie.querySelector(".days");
  $(".modal .days").html(days.innerHTML);
  // $(".modal").modal("show");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>
    <h3> 'This movie is available on:' </h3>
    <div class="days">1 2 3</div>
    <br>
    <button id="b" class="bclass" style=""> Reserve</button>
  </div>

</div>
<div>
  <div class="movie">
    {{ movie.title.value }}
    <img src="{{ file_url(movie.field_image.entity.uri.value) }}">
    <p>{{ movie.field_description.value }}</p>
    <h3> 'This movie is available on:' </h3>
    <div class="days">4 56 6</div>
    <br>
    <button id="b" class="bclass" style=""> Reserve</button>
  </div>

</div>
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Available days for this movie are:</h4>
    <div class="modal-body">
      <div class=days></div>
    </div>
  </div>

</div>