Ruby on railid is not displayed correctly.

I tried to recreate the table in the terminal, but the ID was shown as 4. others suggested that I use each_with_index, but I don’t know where to put it.

Related codes

<div class=”container”>
<div class=”row”>

<div class="col-xs-3">
 <ul class="list-group">
 <li class="list-group-item">
 Category
 <ul class="list-group">
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 </ul>
 </li>
 <li class="list-group-item">
 Category
 <ul class="list-group">
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 < li class="list-group-item "> subcategory < /li >
 </ul>
 </li>
 </ul>
 </div>
 <div class="col-xs-9">
 <div class="row">
 <div class="col-xs-12">
 <div class="jumbotron">
 <h1><%= @ad[:title] %></h1>
 <p><%= @ad[:des] %></p>
 <p><a class="btn btn-primary btn-lg" href="#" role="button"><%= @ad[:action_title] %></a></p>
 </div>
 </div>
 </div>
 <div class="row">
 <% @products.each do |product| %>
 <div class="col-xs-3">
 <div class="thumbnail">
 <%= image_tag product[:image_url] %>
 <div class="caption">
 <h3><%= "#{product[:id]}. #{product[:name]}" %></h3>
 <p><%= product[:description] %></p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
 </div>
 </div>
 <% end %>
 </div>
 <div class="row">
 <div class= "col-xs-12">
 <nav aria-label="Page navigation">
 <ul class="pagination">
 <% if @page > @first_page %>
 <li>
 <%= link_to root_path(page:(@page-1)) do%>
 <span aria-hidden="true">&laquo;  </span>
 <% end %>
 </li>
 <% end %>
 <% (@first_page..@last_page).each do |page_number|%>
 <li><%= link_to page_number,root_path(page:page_number)%> </li>
 <% end %>
 
 <% if @page < @last_page  %>
 <li>
 <%= link_to root_path(page:(@page+1)) do%>
 <span aria-hidden="true">&raquo;  </span>
 <% end %>
 </li>
 <% end %>
 </ul>
 </nav>
 </div>
 </div>
 </div>

</div>
</div>

What is your expected result? The actual error message is again!

What I want is

What we actually got was

This is the table I created in the command side. id skips 2, 3, 4 to 5 directly. how can I modify it to display correctly? Thank God!
Screen shot 2018-07-25 2.12.34 pm