How can I pass the value of a data attribute to an element in a Bootstrap modal?

Question

Сlicking on the button in any block opens a modal window with data from the latter.

I took this SO post as an example, but it didn't work out for me.

$(document).on("click", ".openBlogDialog", function() {
  var myBlogId = $(this).data('id');
  $(".modal-body #elId").val(myBlogId);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-bs-id="3">Open<i class="uil uil-arrow-right"></i></a>

<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        {{el.title}}
        <button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
      </div>

      <div class="modal-body">
        <img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">

        <p name="elId" id="elId">{{ el.content }}</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

Answer 1

1. You named your data attribute data-bs-id, but then you attempted to retrieve it as data-id.
2. You were trying to set a value on a paragraph. Paragraphs don't have a value property.

$(document).on("click", ".openBlogDialog", function() {
  const myBlogId = $(this).data('id');
  $("#elId").text(myBlogId);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-id="3">Open<i class="uil uil-arrow-right"></i></a>

<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        {{el.title}}
        <button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
      </div>

      <div class="modal-body">
        <img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">

        <p name="elId" id="elId">{{ el.content }}</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>