title: Dynamic bootstrap modal, jQuery can not access html elements on first load
body: <p>So i'm dynamically loading modal from my controller, with product information. Each product has a calculator to calculate price. The issue is when I open the modal the first time, I can remove the disable class from the calculate button. If i open/close/open it will work for every calculator on the page.</p>
  <p>products.blade.php</p>
  <p>foreach product</p>
  <pre><code>                                &lt;a
                                      class=&quot;btn-icon&quot;
                                      data-toggle=&quot;modal&quot; 
                                      data-target=&quot;#publicModal&quot; 
                                      data-url=&quot;{!! route('public.products.partials.calculator', ['product_id'=&gt;$pp-&gt;product-&gt;id]) !!}&quot;
                                      data-title=&quot;Calculate cost&quot;
                                      data-size=&quot;modal-xl&quot; &gt;
                                      &lt;i class=&quot;fas fa-calculator&quot;&gt;&lt;/i&gt;
                                  &lt;/a&gt;
  
  
  </code></pre>
  <p>jquery</p>
  <pre><code>if(
                  custSQFT &gt; 0 &amp;&amp;
                  custWidth &gt; &quot;0.00&quot; &amp;&amp;
                  custLength &gt; &quot;0.00&quot; &amp;&amp;
                  totalCost &gt; 0
              ){
                  document.getElementById(&quot;calc-cost&quot;).classList.remove(&quot;disabled&quot;);
                  document.getElementById(&quot;calc-cost&quot;).classList.add(&quot;visible&quot;);
                  calcValid = true;
              }else{
                  $('#calc-cost').prop(&quot;disabled&quot;,true).addClass('disabled')
                  calcValid = false;
              }
  </code></pre>
  <p>Modal</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    $('#publicModal').on('show.bs.modal', function (event) {
      
              if(event.relatedTarget){
                var button = $(event.relatedTarget) // Button that triggered the modal
              }else{
               var button = $('#loginButton');
              }
              
              var url = button.data('url') // Extract info from data-* attributes
              var size = button.data('size') 
             
              var modal = $(this)
              if (typeof(size) !== 'undefined') {
               
                modal.find('.modal-dialog').addClass(size)
              } 
              
              modal.find('.modal-body').load(url);
              modal.find('.modal-title').html(button.data('title'))
          
          });
  
  $('#publicModal').on(&quot;hidden.bs.modal&quot;, function(){
      $(&quot;.modal-body&quot;).html(&quot;&quot;);
      $(&quot;.modal-title&quot;).html(&quot;Loading...&quot;); 
  });        
  &lt;/script&gt;
  </code></pre>
  <p>So when I open up the modal, fill out the forms, I can console.log that I have made it inside the IF statement, but can not remove the visible class.</p>