title: Change content on list click rails
body: <p>I have a modal composed of:
  - A list of steps at the left
  - A content box on the right</p>
  
  <p><strong>I need to be able to click on the steps on the left and the content changes on the right with the corresponding step description.</strong></p>
  
  <p><strong>The markup for showing the steps on the left and content on the right:</strong></p>
  
  <pre><code> &lt;div class="uk-width-1-3"&gt;
     &lt;ul class="pill-steps"&gt;
        &lt;% @pill.steps.each_with_index do |step, index| %&gt;
          &lt;li class="pill-step"&gt;&lt;span class="pill-number"&gt;&lt;%= index + 1%&gt;&lt;/span&gt;&lt;%= step.name %&gt;&lt;/li&gt;
        &lt;% end %&gt;
     &lt;/ul&gt;
   &lt;/div&gt;
   &lt;div class="uk-width-2-3 uk-padding-large pill-content"&gt;
     &lt;% if @pill.steps.any? %&gt;
      &lt;% @pill.steps.each_with_index do |step, index| %&gt;
         &lt;div id="&lt;%= @pill.id %&gt;" class="pill"&gt;
           &lt;h2&gt;&lt;%= @pill.steps.first.name %&gt;&lt;/h2&gt;
           &lt;p&gt;&lt;%= @pill.steps.first.desc %&gt;&lt;/p&gt;
         &lt;/div&gt;
      &lt;% end %&gt;
     &lt;% end %&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>The js to click on the step on the left and showing the content in the right:</strong></p>
  
  <pre><code>  &lt;script&gt;
      $(".pill-step").click(function() {
        $(".pill-content").html("&lt;h2&gt;&lt;%= step.name %&gt;&lt;/h2&gt;&lt;p&gt;&lt;%= step.desc %&gt;&lt;/p&gt;");
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>I don't know where to put the JS or how to make it dynamic :(
  Basically, I want the user to click on the step in the left and show the corresponding <code>step.description</code> and <strong>step.title</strong> on the right.</p>
  
  <p>Any ideas on how to achieve this?</p>
  
  <p>Thanks!</p>