List item loses styling when added dynamically - html

Question

I am using the latest version of Bootstrap for the styling of most of my HTML elements.
On one of my pages I need to dynamically add list items to my <ul></ul> element. I am adding these additional list items with jQuery. This is how I do it:
$('ul.test-items').append('<li class="available">Test Item</li><li class="available">Test Item</li>');');
After a new list item is added to the ul element it seems to lose the styling just for that <li></li> item, the already added list items display correctly. The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding. Do I need to redraw the ul element after adding new list items to it so that it can be styled as part of the ul element?
It seems to work well for adding 1 list item element, but 2 or more you can see the difference.
This is my current HTML markup:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
</ul>
After adding the new list items via jQuery it looks like this:
<ul class="list-inline test-items">
<li class="available">product colour 1</li>
<li class="available">product colour 3</li>
<li class="available">Test Item</li>
<li class="available">Test Item</li>
</ul>
When I view the markup by pressing F12 in Chrome it looks right, it's just not displaying right. My guess is it is not part of the already styled ul element.
Here is my style:
.test-items .available
{
border: 2px solid #999;
}

Answer 1

The list items have padding on either side of them, but when added they seems to be added next to each other, with no padding
Padding is inside the element – and the newly added elements have that padding inside of their borders as well. That is not the issue.
The spacing between the elements, that comes only from the whitespace between the element’s tags – because the li are displayed inline.
If that’s what you are after here – then you simply have to add that whitespace between the newly added elements yourself:
.append('<li class="available">Test Item</li> <li class="available">Test Item 2</li>');
https://jsfiddle.net/0s7n3907/4/