Context: I'm retrieving an array with several tickers from stocks (such as AAPL, FB, TSLA,etc) from PHP and now I'd like the user to select multiple stocks from this datalist, however, I'm not sure how to do exactly that. I've tried using multiple, but it doesn't seem to be working. I am being able to see the scrollable list of the 500+ tickers from PHP (connected to MySQL), but I can only choose one at a time and not several of them.
HTML and Javascript
<div class="loss">
<div class="row">
<div class="col">
<div id="data">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;" list="brow">
<datalist id="brow">
<form id="myForm">
<select id="selectStock">
<option></option>
</select>
</form>
</datalist>
<input class="button1" type="submit" name="submit" id="submit"></input>
</form>
<script>
var select = document.getElementById("selectStock");
var options = <?php echo json_encode($tickerArray) ?>;
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.innerHTML = opt;
el.value = opt;
select.appendChild(el); /
}
</script>
</div>
</div>
</div>
Any help is very welcome!