title: Html table new rows create within the column ASP.NET MVC
body: <p>In my ASP.NET MVC application, I am stuck in the position that when I add new rows to the column, it's inserted within the 1st column of the table, not to every column.</p>
  <p>The summary of the application is, there is a supplier list I am getting from the database. Then in one view, I added a table with permanent headings Description, Qty and other columns created count of the suppliers that request included.</p>
  <p>Then I created another partial view, which connected to another model, In the main view user clicks the &quot;Add&quot; button, new rows should be created for each of the columns that are already there.</p>
  <p>But the issue is, the new rows are created within the 1st column Description.</p>
  <p>Here is some output of the issue. Currently there is one supplier JKW Holdings. So the Description column is there, Qty column is there, and the supplier is column. But when I click the add button Qty and Supplier column goes right side of the table and new rows created within the Description column.</p>
  <p>Here is my code for main view</p>
  <pre><code>@model Asp_PASMVC.Models.PurchasingTable
  
  @{
      ViewBag.Title = &quot;PurchaseDetails&quot;;
      Layout = &quot;~/Views/Shared/_Layout.cshtml&quot;;
  }
  
  @Html.HiddenFor(x =&gt; x.RequestId)
  
  &lt;br /&gt;
  &lt;table width=&quot;100%&quot; class=&quot;table table-bordered&quot;&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Item Description&lt;/th&gt;
  
              &lt;th&gt;Qty&lt;/th&gt;
  
              @foreach (var item in Model.SuppList) //new columns will be created with the supplier count that user added earlier
              {
                  &lt;th&gt;@item&lt;/th&gt;
              }
  
              &lt;th&gt; &lt;button type=&quot;button&quot; id=&quot;addAnotherItem&quot; class=&quot;btn btn-success&quot; href=&quot;#&quot;&gt;Add&lt;/button&gt;&lt;/th&gt;  @*calling to the partial view*@
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody id=&quot;IteMLi&quot;&gt;
          
  
          @if (Model != null &amp;&amp; Model.PurchasingItemList != null)
          {
              foreach (Asp_PASMVC.Models.PurchasingDetails Emp in Model.PurchasingItemList)
              {
                  Html.RenderPartial(&quot;_PurchaseEmployees&quot;, Emp);
              }
          }
  
  
  
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(function () {
  
          $(&quot;#addAnotherItem&quot;).click(function () {
              $.get('/AppRequests/AddPurchaseItemDetails', { Id: $('#RequestId').val() }, function (template) {
                  $(&quot;#IteMLi&quot;).append(template);
              });
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  <p>This is the action result</p>
  <pre><code>public ActionResult AddPurchaseItemDetails(int Id)
  {
      PurchasingDetails newM = new PurchasingDetails();
  
      int RId = db.Purchase.Where(x =&gt; x.Req_Id == Id).First().Id;
      var Supp = db.PurchasingItems
                   .Where(r =&gt; r.Purchase_Id == RId).ToList()
                   .Select(x =&gt; x.Supp_Id).ToList();
  
      List&lt;PurchasingDetailsSup&gt; Te = new List&lt;PurchasingDetailsSup&gt;();
  
      foreach (int item in Supp)
      {
          Te.Add(new PurchasingDetailsSup { Supp_Id = item });
      }
  
      newM.PurchasingDetailsSup = Te;
  
      return PartialView(&quot;_PurchaseDetails&quot;, newM);
  }
  </code></pre>
  <p>This is the partial view</p>
  <pre><code>@model Asp_PASMVC.Models.PurchasingDetails
  @using Asp_PASMVC.Infrastructure
  
  @{
      List&lt;SelectListItem&gt; Suppliers = Session[&quot;SupplierList&quot;] as List&lt;SelectListItem&gt;;
      List&lt;SelectListItem&gt; ItmDescription = Session[&quot;Itm_DesList&quot;] as List&lt;SelectListItem&gt;;
  
  }
  
  @using (Html.BeginCollectionItem(&quot;PurchasingItemList&quot;))
  {
  
      @Html.HiddenFor(model =&gt; model.TempID)
  
      &lt;tr&gt;
          &lt;td&gt;@Html.EditorFor(model =&gt; model.Item_Description, new { htmlAttributes = new { @class = &quot;&quot; } })&lt;/td&gt;
  
          &lt;td&gt;@Html.EditorFor(model =&gt; model.Qty, new { htmlAttributes = new { @class = &quot;&quot; } })&lt;/td&gt;
  
          @for (int i = 0; i &lt; Model.PurchasingDetailsSup.Count; i++)
          {
              &lt;td&gt;@Html.EditorFor(model =&gt; model.PurchasingDetailsSup[i].Unit_Amount, new { htmlAttributes = new { @class = &quot;&quot; } })&lt;/td&gt;
          }
  
          &lt;td&gt;&lt;a href=&quot;#&quot; onclick=&quot;$(this).parent().remove();&quot;&gt;Delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  }
  </code></pre>
  <p>Here is the current output
  <a href="https://i.stack.imgur.com/0sv95.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0sv95.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/i4oni.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i4oni.png" alt="enter image description here" /></a></p>