When a user clicks on a button, I am dynamically populating a list of items. Despite using list-group-horizontal, I am unable to make it display horizontally.
HTML code
<div id="textarea_display" class="mt-2 ">
<label>Output:</label>
<div id="box" classword="row">
<p id="para">
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<ul class="list-group list-group-horizontal" id="termList">
<!-- dynamic li items created in JS -->
</ul>
</div>
</div>
</div>
</div>
JS code
// highlight using mark js in javacript
var context = document.querySelector("#para");
var instance = new Mark(context);
instance.mark(dict_keys);
var paragraph = document.getElementById("para")
$('mark').wrapAll('<button class="btn btn-danger btn-sm" type="button" id="collapseButton" data-toggle="collapse" aria-expanded="false" data-toggle-second="tooltip" data-placement="top" title="Common misspelling" aria-controls="collapseExample" data-target="#collapseExample"></button>')
var button = document.getElementById("collapseButton");
var ul = document.querySelector("#termList");
button.addEventListener("click", function() {
var arrayLength = dict_values.length;
for (var i = 0; i < arrayLength; i++) {
console.log(dict_values[i]);
var li = document.createElement("li");
li.className = "list-group-item ";
li.appendChild(document.createTextNode(dict_values[i]));
ul.appendChild(li);
}
})
I have customized the style for the div with id = box and the card will be contained within this box. The list of items is currently displayed vertically within the card. Any assistance would be highly appreciated.