title: dynamic image slider into dynamic cards in asp.net mvc c#
body: <p>I want to display cards in my home page this cards content image slider.
  ex: card contains Toyota cars information and slider for cars images. 
  another card to display BMW cars information and slider for cars images.
  I already have the database and model and my code run perfectly with one card only when I enter two or more cards it doesn't work(the images appear only in the first card).</p>
  
  <p>here is my code:</p>
  
  <pre><code>@foreach (var item in Model.BrokenCar)
      {
          &lt;div class="col-md-4"&gt;
              &lt;div class="card mb-3"&gt;
                  &lt;h3 class="card-header"&gt;@Html.DisplayFor(modelItem =&gt; item.Title)&lt;/h3&gt;
                  &lt;form id="form1"&gt;
                      &lt;div class="carousel-inner"&gt;
                          &lt;div id="container"&gt;
                              &lt;p&gt;@Html.DisplayFor(modelItem =&gt; item.DescriptionEn)&lt;/p&gt;
                              &lt;div id="banner-fade"&gt;
                                  &lt;ul class="bjqs"&gt;
                                      @foreach (var image in Model.BrokenCarImage.Where(o =&gt; o.BrokenCarID.Equals(item.BrokenCarID)))
                                      {
                                          var base64 = Convert.ToBase64String(image.BrokenCarImg);
                                          var imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
                                          &lt;li&gt;
                                              &lt;img src='@imgsrc' title='@Html.DisplayFor(modelItem =&gt; item.Title)' alt=""&gt;
                                          &lt;/li&gt;
                                      }
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;script src="../assets/js/libs/jquery.secret-source.min.js"&gt;&lt;/script&gt;
                          &lt;script&gt;
                              jQuery(function ($) {
  
                                  $('.secret-source').secretSource({
                                      includeTag: false
                                  });
  
                                  $('#banner-fade').bjqs({
                                      height: 320,
                                      width: 620,
                                      responsive: true
                                  });
                              });
                          &lt;/script&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div class="card-body"&gt;
                      &lt;a href="#" class="card-link"&gt;Card link&lt;/a&gt;
                      &lt;a href="#" class="card-link"&gt;Another link&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="card-footer text-muted"&gt;
                      2 days ago
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      }
  </code></pre>