title: How to create dynamic element with iterative class name?
body: <p>I want to create tab dynamically with iterative for each as bellow, but its creating space like <code>tab-btn 1</code>, <code>tab-btn 2</code>. How to iterate for class name.</p>
  
  <pre><code>&lt;li&gt;
                      &lt;a href="javascript:void(0);" class="active tab-btn1"&gt;View Document - 01&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);" class="tab-btn2"&gt;View Document - 02&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);" class="tab-btn3"&gt;View Document - 03&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);" class="tab-btn4"&gt;View Document - 04&lt;/a&gt;
                  &lt;/li&gt;
  </code></pre>
  
  <p>I have created for loop as bellow,</p>
  
  <pre><code>  @{int i = 0;}
              @foreach (System.Data.DataRow item in ds.Tables[0].Rows)
              {
  
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);" class="tab-btn @i"&gt;@item["M36_01_TypeName"]&lt;/a&gt;
                  &lt;/li&gt;
                  i++;
              }
  </code></pre>
  
  <p>I have also tried as suggest in excepted answer of <a href="https://stackoverflow.com/questions/34013161/razor-using-foreach-insert-html-every-nth-item">Razor - using foreach, insert html every nth item</a> but its also not working.</p>