Adding a dynamic value to a jQuery data value string

Question

So, I have a simple UL page that needs to be populated at runtime through AJAX calls and JSON responses.

$(".select-brands").append("<li data-value=" + manufacturerName + ">" + manufacturer + "</li>");

After that, I use this data-value attribute to scroll to the element with the same name as the user selected in another selection field. Therefore, when they select a Harley Davidson picture, jQuery will look in the element with

data-value="HARLEY-DAVIDSON"

However, the result is not what I expected, instead of this data value I get such elements instead

<li data-value="HARLEY" davidson="">HARLEY DAVIDSON</li>

How can I make it so that I can select elements based on this name? can this be done through text inside li tags?

// Get corresponding brand on list by custom data-value attribute //
var listBrand = $('li[data-value="'+ selectedBrand.toUpperCase() +'"]');
var parent    = $('#brands-select');
var index     = listBrand.index();

parent.animate({
        scrollTop: $('#brands-select li:nth-child('+ index +')').position().top - $('#brands-select li:first').position().top
}, 'slow');

To the code that I used to go to the item selected.

Answer 1

$(".select-brands").append("<li data-value=" + manufacturerName + ">" + manufacturer + "</li>");

. :

$(".select-brands").append("<li data-value='" + manufacturerName + "'>" + manufacturer + "</li>");

.

, : <li data-value=HARLEY-DAVIDSON>, .