title: How to place border around all @objects (not each object)?
body: <p>How can I put a <code>challenges-border</code> around all the <code>Date.current</code> challenges?</p>
  
  <p>The problem with this first example is that the border is placed around each challenge, but I want the border to be placed around all the challenges that are <code>Date.current</code>.</p>
  
  <h2>Attempt #1</h2>
  
  <pre><code>&lt;% @challenges.each do |challenge| %&gt;
    &lt;% if challenge.deadline == Date.current %&gt;
      &lt;div class="challenges-border"&gt;
        &lt;%= challenge.deadline %&gt;: &lt;%= challenge.action %&gt;
      &lt;/div&gt;
    &lt;% else %&gt;
      &lt;%= challenge.deadline %&gt;: &lt;%= challenge.action %&gt;
    &lt;% end %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ed5xn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ed5xn.png" alt="enter image description here"></a></p>
  
  <h2>Attempt #2</h2>
  
  <p>I get error <code>deadline</code> undefined method</p>
  
  <pre><code>&lt;% if @challenges.deadline == Date.current %&gt;
    &lt;div class="challenges-border"&gt;
  &lt;% end %&gt;
  
  &lt;% @challenges.each do |challenge| %&gt;
    &lt;%= challenge.deadline %&gt;: &lt;%= challenge.action %&gt;
  &lt;% end %&gt;
  
  &lt;% if @challenges.deadline == Date.current %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <h2>Attempt #3</h2>
  
  <p>This doesn't work because I want the challenges to be organized in descending order via deadline, which means <code>Date.current</code> challenges could appear in the middle of the list instead of listing them all as <code>@todays_challenges</code> at the end.</p>
  
  <pre><code>&lt;% @challenges.each do |challenge| %&gt;
    &lt;%= challenge.deadline %&gt;: &lt;%= challenge.action %&gt;
  &lt;% end %&gt;
  
  &lt;div class="challenges-border"&gt;
    &lt;% @todays_challenges.each do |challenge| %&gt;
      &lt;%= challenge.deadline %&gt;: &lt;%= challenge.action %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>