ruby on rails eachメソッドがうまく繰り返されない。

Question

###実現したいこと

eachメソッドを使用して該当部分（<div class="order_container hover">,,,</div>）を繰り返したい。

###問題点
eachメソッドで、予想外の部分が繰り返されてしまう。
下記コードで見てみると、画像のように２つ目以降の<div class="order_container hover">,,,</div>は<div calss="cart_area" style="width: 70%;">,,,</div>の中で繰り返されてしまいます。

###コード

(show.html.erb)
            <div class="history">
                <div class="order_wrapper">
                    <% @address_ids.each do |address_id|%>
                    <div class="order_container hover">
                        <div class="order_number"><p>購入日：<%= l address_id.created_at, format: :for_result %></p></div>
                        <div calss="cart_area" style="width: 70%;">
                            <% orders = Order.where(address_id: address_id.id) %>
                            <% orders.each do |order|%>
                                <% product = Product.find_by(id: order.product_id) %>
                                <div class="card mb-3" style="max-width: 840px; margin-bottom:3rem;">
                                    <div class="row no-gutters">
                                        <div class="col-md-4">
                                            <% images= Image.find_by(product_id: order.product_id) %>
                                            <%= image_tag "#{images.name1}", alt: "#{Product.find_by(id: order.product_id).name}", class:"card-img" %>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="card-body">
                                            <h5 class="card-title"><%= product.name %></h5>
                                            <p class="card-text">
                                                <p class="text-muted" style="font-size: 2rem;"><%= product.price %><span style="font-size: 1.5rem"> 円/個</span></p>
                                                <div class="count">
                                                    <p class="text-muted"><%= order.quantity%>個</p>
                                                    <p class="text-muted">小計：<%= product.price * order.quantity %> 円</p>
                                                </div>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            <% end %>
                        </div>
                    </div>
                    <% end %>
                </div>
            </div>

###補足情報（FW/ツールのバージョンなど）
ruby 2.6.6
rails '~> 5.2.4', '>= 5.2.4.3'

Answer 1

途中で<p class="card-text">（改行）<p class="text-muted" style="font-size: 2rem;">となっていますが、<p>はネストできませんので、<p class="card-text">（改行）</p><p class="text-muted" style="font-size: 2rem;">とみなされます。

結果、<p class="card-text">は中身がなにもないまま閉じられてしまいます。

Comments

[maisumakun]

そして、</p>が余分になる結果、タグのネストが全体的に崩れているものと予想されます。

[tomato185]

maisumakun様
ご回答ありがとうございます。

pタグはネストできないんですか！！
初めて知りました！ありがとうございます
では、こちらをdivタグに変えればうまくいくのでしょうか？？

[maisumakun]

他に問題がないとは言い切れないので、やってみないとわからないです。

[tomato185]

結論から申し上げますと、変化はありませんでした。
同様に<div calss="cart_area" style="width: 70%;">,,,</div>の中でループされてしまいました。

[maisumakun]

いまよく確認してみたら、<div class="card-body">に対応する</div>が足りないようです。

（あと、classがcalssになっている箇所がありました）

[tomato185]

maisumakun様
大変お騒がせして申し訳ありませんでした。
<div class="card-body">
に対する</div>がありませんでした。