title: How to insert .erb into a data-target parameter | Ruby on Rails
body: <p>I have a bootstrap(3.3) collapse used to reply to individual comments in my rails app.
  The problem with collapse is the <code>data-target</code> and the <code>aria-controls</code> need to be unique for every comment. This is the case due to every comment being left holds the static value set to the first comment (<code>data-target="#collapse1"</code>)</p>
  
  <p>I've tried to use some <code>ERB</code> like the following to insert a unique value in place of "1" so it can be a unique collapse for each comment.</p>
  
  <p>This unfortunately didn't work: <code>data-target="&lt;%= '#collapse#{@comment.id}' %&gt;"</code></p>
  
  <p>Nor did my doubtful attempt of: <code>data-target=&lt;%= "#collapse#{@comment.id}" %&gt;</code> work.</p>
  
  <p>I don't know if I'm just missing something completely obvious about <code>ERB</code> or if this really just isn't practical/possible with rails.</p>
  
  <p>If this is much more suitable for Javascript or Jquery, please let me know. (and help me out if you can!)</p>
  
  <p>Thanks in advance for sharing this awful experience with me.</p>
  
  <p><strong>EDIT:</strong>
  This is the following code I am trying to manipulate:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1"&gt;Reply&lt;/button&gt;
  &lt;div class="collapse" id="collapse1"&gt;
    &lt;%= simple_form_for([comment, Comment.new]) do |f| %&gt;
    &lt;%= render 'shared/error_messages', object: f.object %&gt;
      &lt;%= f.input :body, :as =&gt; :text, input_html: { maxlength: 300 }, label: false, placeholder: "What are your thoughts?", class: "form-control", wrapper_html: { id: 'contactTextarea' } %&gt;
      &lt;%= f.input :name, label: false, placeholder: "Name (required)", class: "form-control" %&gt;
      &lt;%= f.input :email, label: false, placeholder: "Email Address (required) - This is not displayed with the comment", class: "form-control" %&gt;
      &lt;%= f.submit "Reply", class: "btn btn-success" %&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>PLAIN HTML EDIT:</strong></p>
  
  <pre><code>&lt;div class="wellington top-drop"&gt;
    &lt;h3 class="title-top align-left"&gt;Name&lt;/h3&gt;
    &lt;div style="clear: both;"&gt;&lt;/div&gt;
    &lt;p class="nobot align-left"&gt;Good stuff!&lt;/p&gt;
    &lt;button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse11" aria-expanded="false" aria-controls="#collapse11"&gt;Reply&lt;/button&gt;
    &lt;div class="collapse" id="#collapse11"&gt;
      &lt;form novalidate="novalidate" class="simple_form new_comment" id="new_comment" action="/comments/11/comments" accept-charset="UTF-8" method="post"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;&lt;input type="hidden" name="authenticity_token" value="[token]"&gt;
  
        &lt;div id="contactTextarea" class="form-group text required comment_body"&gt;&lt;textarea class="form-control text required" maxlength="300" placeholder="What are your thoughts?" name="comment[body]" id="comment_body"&gt;&lt;/textarea&gt;&lt;/div&gt;
        &lt;div class="form-group string required comment_name"&gt;&lt;input class="form-control string required" placeholder="Name (required)" type="text" name="comment[name]" id="comment_name"&gt;&lt;/div&gt;
        &lt;div class="form-group email required comment_email"&gt;&lt;input class="form-control string email required" placeholder="Email Address (required) - This is not displayed with the comment" type="email" name="comment[email]" id="comment_email"&gt;&lt;/div&gt;
        &lt;input type="submit" name="commit" value="Reply" class="btn btn-success" data-disable-with="Reply"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div style="clear: both;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>FINAL EDIT (THE WORKING CODE):</strong></p>
  
  <pre><code>&lt;button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="&lt;%= "#collapse#{comment.id}" %&gt;" aria-expanded="false" aria-controls="&lt;%= "collapse#{comment.id}" %&gt;"&gt;Reply&lt;/button&gt;
  &lt;div class="collapse" id="&lt;%= "collapse#{comment.id}" %&gt;"&gt;
    &lt;[reply form]&gt;
  &lt;/div&gt;
  </code></pre>