Strange issue with adding selects

This testcase shows an issue where you add new dropdowns to the page and it causes others to lose their value.

by alexbfree

HTML

<div id="container">
</div><hr/>
<button id="addbutton">Add another</button>

JavaScript

// To use this testcase:
// 1. Load the page
// 2. For the first and third ("no value selected") dropdowns, select option B. All dropdowns now show option B.
// 3. Click the "Add another" button
// 4. Notice that first and third dropdowns have lost data.

let existing_options = [
	"A","B","C"
];

let containerEl = document.getElementById("container");

let count = 0;

function addSelect(preselectOptionB=false) {
  html = `<select class="selector" name=${count}><option value="">No value selected</option>`;
  count++;
  existing_options.forEach(function (dataValue,index) {
		html += `<option value=${dataValue} ${(preselectOptionB && dataValue=="B") ? 'selected="selected"' : ""}>${dataValue}</option>`;
  });
  html += `</select><br/>`;
  containerEl.innerHTML += html;
}

function addNewSelectWithNoValue() {
	addSelect(false);
}

let button = document.getElementById("addbutton");
button.addEventListener('click', addNewSelectWithNoValue);

// add four initial ones.
addSelect();
addSelect(true);
addSelect();
addSelect(true);