title: Javascript is working only first time in the loop
body: <p>I have this foreach loop inside laravel blade. which is only producing one time and making the giving that specific CSS onclick and on the second click removing those CSS styles. But on the rest of the populated data, it applies CSS but does not remove.</p>
  <pre><code>@foreach($campaigns as $campaign)
  
          &lt;div id=&quot;opac&quot; class=&quot;row d-flex border-bottom border-secondary mt-4&quot; style=&quot;color:white&quot;&gt;
              &lt;div class=&quot;col-5 col-md-2 mb-4&quot;&gt;
  
                  &lt;div class=&quot;d-flex&quot;&gt;
                      &lt;div class=&quot;ml-2&quot;&gt;
                          
                          &lt;span id=&quot;artist_name&quot; class=&quot;text-muted&quot; style=&quot;font-family:Arial, Helvetica, sans-serif&quot;&quot;&gt;{{$campaign-&gt;artist_name}}&lt;/span&gt; &lt;br&gt;
                          
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      @endforeach
  </code></pre>
  <p>Javascript</p>
  <pre><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  
      $(document).ready(function() {
          $(&quot;#opac&quot;).click(function() {
              //Check to see if background color is set or if it's set to white.
              if (this.style.background == &quot;&quot;) {
                  $(this).css('background', 'rgba(255, 255, 255, 0.1)');
                  $(this).css('padding-top', '15px');
              } else {
                  $(this).css('background', '');
                  $(this).css('padding-top', '15px');
              }
          });
      });
  
  &lt;/script&gt;
  
  </code></pre>