title: passing values to bootstrap modal
body: <p>I am trying to pass values to my <code>modal</code> in html using <code>JQUERY</code>.</p>
  <p>I have this:</p>
  <pre><code>&lt;a class=&quot;dropdown-item&quot; href=&quot;javascript:void(0);&quot; data-toggle=&quot;modal&quot; data-target=&quot;#clientStatus&quot; data-clientCurrentStatus=&quot;inactive&quot;&gt;Change Client Status&lt;/a&gt;
  &lt;script&gt;
      $(function() {
          $('#clientStatus').on('show.bs.modal', function(event) {
              var button = $(event.relatedTarget); // Button that triggered the modal
              var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes
  
              // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
              // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
              var modal = $(this);
              modal.find('#clientCurrentStatus').val(clientCurrentStatus);
          });
      });
  &lt;/script&gt;
  </code></pre>
  <p>and what I am trying to do is inside <code>data-clientCurrentStatus</code> i am passing the value. and then inside my <code>modal</code> I have this:</p>
  <pre><code>&lt;div class=&quot;modal fade&quot; id=&quot;clientStatus&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabelLogout&quot;
          aria-hidden=&quot;true&quot;&gt;
          &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabelLogout&quot;&gt;Update Client Status&lt;/h5&gt;
                &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                  &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                &lt;p&gt;Current Status:&lt;/p&gt;
                &lt;input type=&quot;text&quot; name=&quot;clientCurrentStatus&quot; id=&quot;clientCurrentStatus&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; data-dismiss=&quot;modal&quot;&gt;Cancel&lt;/button&gt;
                &lt;a href=&quot;/logout&quot; class=&quot;btn btn-primary&quot;&gt;Logout&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>so as you can see, the <code>id</code> matches, and everything matches. I am not sure why it isn't working. I am importing the <code>jquery</code> tag like this:</p>
  <pre><code>&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>but nothing is working. how can i fix this?</p>