title: jQuery doesn't output proper HTML
body: <p>I have a very old Rails 3 project I'm maintaining, to which I need to add new functionality. Primarily responsiveness with Bootstrap 4.</p>
  <p>This is what I actually want to create: <a href="http://jsfiddle.net/k1zbe4o9/" rel="nofollow noreferrer">http://jsfiddle.net/k1zbe4o9/</a>. As you can see it works perfectly in the fiddle. However this project uses jQuery to dynamically change HTML. The jQuery code is fairly simple</p>
  <pre><code>if (best_price) {
    li_class = &quot;list-group-item&quot;;
    li_class += &quot; card-list-best&quot;;
  }
  </code></pre>
  <p>I use this in function like so:</p>
  <pre><code>var list_html = $(&quot;&lt;li class=&quot; + li_class + &quot;&gt;&quot; + list_details_html + &quot;&lt;/li&gt;&quot;);
  </code></pre>
  <p>However, when I do this I get this weird thing that the jQuery doesn't return this properly, so instead of having <code>list-group-item card-list-best</code> inside a single <code>&lt;li&gt;</code> class, somehow I get <code>card-list-best</code> outside that scope, and the result is as shown.</p>
  <p>The same thing happens if I do:</p>
  <pre><code>if (best_price) {
    li_class = &quot;list-group-item card-list-best&quot;;
  }
  </code></pre>
  <p>Any help is appreciated.</p>
  <p><a href="https://i.stack.imgur.com/dqHqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqHqj.png" alt="jquery segment" /></a></p>