Unable to add row dynamically in loop inside table in Razor - razor

Question

I want to display 3 Cells in a row and then create row <tr> dynamically for remaining cells. When I searched for this logic, I am getting same answer from multiple articles about using modulo and it seems working for evryone but I'm not getting desired output. What am I missing here?
Code:
<table>
#for (var i = 0; i < deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList.Count; i++)
{
var deliveryTag = deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList[i];
if ((i%3) == 0) //Create new row for 4th item
{
#:<tr>
}
<td>
<div class="input-element checkbox">
#Html.CheckBoxFor(x => x.DeliveryProviderList[j].DeliveryTagInfo.IsDeliveryTagSelectedList[i], new
{
name = deliveryTag,
id = deliveryTag
})
<label for="#deliveryTag">
<span></span>#deliveryTag</label>
</div>
</td>
if ((i%3) == 0)
{
#:</tr>
}
}
</table>
Output:
Expected Output:
Test1
ALCOHOL SPILLABLE COLD_BAG
HOT_BAG HEAVY SIZE
Test2
abc pqr xyz

Answer 1

Some of the problem code is in your closing tag.
if ((i%3) == 0)
{
#:</tr>
}
On your first iteration, i%3 is == 0, so you put a closing tag on your first statement. Essentially you are only creating <tr> tags on every third one.
Here is an example of how you could remedy this:
var listCount = 11;
for (var i = 0; i < listCount; i++)
{
if (i%3 == 0)
{
#:<tr>
}
//Add Checkboxes
//Closing Tag
if (((i+1) % 3 == 0 )|| i == listCount - 1)
{
#:</tr>
}
}
Closing tag Explained...
For the first condition of the closing tag:
(i+1) % 3 == 0 )
Since the item has been added, we check to see if it is the third one- by using i+1, we will know how many items
are in the row and we can close it if it is.
For the second condition:
i == listCount - 1
We also need to account for if it is the last item. If the list only has 2 items for example, we still need to close the row.