JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <button class="btn btn-sm dropdown-item edit-button" data-toggle="modal" data-target="#announcementEditModal" data-id="announcement.id" data-content="announcement.content" type="button">
       <div class="announcement-actions">
          <span class="fas fa-pencil-alt"></span> Edit announcement
       </div>
  </button>
  </div>
</div>

<div class="modal fade" id="announcementEditModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header announcement-header">
        <h5 class="modal-title" id="exampleModalLabel"><span class="fas fa-edit"></span> Edit new announcement</h5>
      </div>
      <div class="announcement-card-header card m-3 border-0">
        <div class="announcement-card-header card-body border-0 p-1">
          <span class="fa fa-info-circle fa-lg header-icon"></span>
          <h5 class="align-header">ANNOUNCEMENT TEXT</h5>
        </div>
        <div class="announcement-card-body modal-body card border-0">
          {{ form_start(editForm) }}
          <div class="announcement-card-body">
            <label for="exampleInputEmail1">ANNOUNCEMENT (SUPPORTS MARKDOWN)</label>
            <textarea...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

// Revealing Module Pattern
  var MyProject = MyProject || {}; // Your global object
  MyProject.Modal = function() { // Namespacing to Modal

    var content = ""; // now content is local to this function;

    var onEditClick = function() {
      $(".edit-button").click(function() {
        content = $(this).data("content");
        alert(content);
      });
    };

    var onModalShow = function() {
      $('#announcementEditModal').on('shown.bs.modal', function() {
        alert("modal open");
        // $("#announcementText").val(content); <-- jQuery way
        document.getElementById("announcementText").value = content;
      });
    };

    var init = function() {
      onEditClick();
      onModalShow();
    };

    return {
      init: init // expose this for other functions to call
    }

  }();

  $(document).ready(function() {
    MyProject.Modal.init();

  });