How To Pass Dynamic Data In Bootstrap Modal?

I am trying to achieve the following: I have a button :

---

Example

---

Reference:

bootstrap - modal events

$('#mymodal').on('show.bs.modal', function(e) {
  var id = $(this).find('.modal-body').text(e.relatedTarget.id);
  if(id) console.log(id);
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" ><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script><buttonid="whateverID"type="button"class="btn btn-danger btn-sm pull-right"data-toggle="modal"data-target="#mymodal">Open</button><divclass="modal fade"id="mymodal"data-placement="right"role="dialog"><divclass="modal-dialog"><!-- Modal content--><divclass="modal-content"><divclass="modal-header"style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
        Header

      </div><divclass="modal-body"><p>One fine body&hellip;</p></div><divclass="modal-footer"></div></div></div></div>