title: script code doesn't run inside foreach loop?
body: <pre><code>&lt;!--language: lang-html--&gt; 
  @foreach (var book in Model.Category.Books)
     {
  
        &lt;div class="rate-star-@book.Id"&gt;&lt;/div&gt;
          &lt;script&gt;
            $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
          &lt;/script&gt;
  
    }
  </code></pre>
  
  <p><strong>A brief explanation about what I'm trying to do:</strong>
  This script code inside the loop is one of the star rating plugins that I need to implement for books on the page. The problem here is that I need to include jquery code further up in the body but since JQuery library loads later than the script code, I get "$ is not defined" error.</p>
  
  <p><strong>What Have I tried:</strong>
  I tried to implement the solution on this page<br>
  [<a href="https://stackoverflow.com/questions/8298430/handling-code-which-relies-on-jquery-before-jquery-is-loaded/25636162#25636162][1]">Handling code which relies on jQuery before jQuery is loaded</a> written by <strong>Ashkan Mobayen Khiabani</strong>. I put the code inside a function. The function is called at the bottom of the body. It is supposed to be called as many times as it's created in per iteration. But since it's called only once at the bottom the other created functions don't run and only one book gets affected by the function as a result.</p>
  
  <pre><code> &lt;!--language: lang-html--&gt; 
      @foreach (var book in Model.Category.Books)
         {                  
            &lt;div class="rate-star-@book.Id"&gt;&lt;/div&gt;
              &lt;script&gt;
     function rateStar{
                $(".rate-star-@book.Id").stars({ stars:5, readonly:false});
              &lt;/script&gt;
             }                                   
        }
  
  @section scripts
   { 
       &lt;script&gt;
   rateStar(); 
       &lt;/script&gt;
  }
  </code></pre>
  
  <p>So how to do that function gets called as many times as it's created in the document? </p>