jQuery doesn't output proper HTML

I have a very old Rails 3 project I'm maintaining, to which I need to add new functionality. Primarily responsiveness with Bootstrap 4.

This is what I actually want to create: http://jsfiddle.net/k1zbe4o9/. 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

if (best_price) {
  li_class = "list-group-item";
  li_class += " card-list-best";
}

I use this in function like so:

var list_html = $("<li class=" + li_class + ">" + list_details_html + "</li>");

However, when I do this I get this weird thing that the jQuery doesn't return this properly, so instead of having list-group-item card-list-best inside a single <li> class, somehow I get card-list-best outside that scope, and the result is as shown.

The same thing happens if I do:

if (best_price) {
  li_class = "list-group-item card-list-best";
}

Any help is appreciated.