[Malleys]

Клиент хочет, чтобы добавили еще одну колонку с выпадающим списком. При каждом выборе даты, определить день недели и запомнить. Если после этого открыть выпадающий список, то его перед открытием динамически заполнить десятком дат с днем недели, как у последней введенной даты.

Если вам нужно выбрать дату из календаря (например завтра — пятница), а затем из списка одну из 10 дат (какую-то одну из десяти пятниц), то вам не нужен отдельный массив, всё это решается «на лету»

Как перехватить событие после выбора даты и вызвать функцию, которая обнулит массив дат и заполнит его датами с таким же днем недели?

Метод addEventListener на общем родителе позволит обрабатывать все календари.

Как при открытии списка, его динамически заполнить датами из массива?

После выбора даты можно сразу заполнить список следующими десятью датами (следующими 10-ю пятницами), так что изначально будет указана выбранная дата (только одна пятница, а открыв список, можно увеличить кол-во пятниц) с возможностью затем выбрать другую дату.

После выбора элемента - автоматически заполнить соответствующую дату и отобразить ее?

Здесь не совсем понятно, что вы имеете в виду, однако стоит учитывать, что если вы что-то выбираете в списке, то он сам знает, что выбрано, и при отправке формы (или чтении данных формы) выбранная дата будет на месте.

Например так...

<form name="FormDates" id="fd" method="post" action="">
	<table class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>Id</th>
				<th>Name</th>
				<th>Date</th>
				<th>Select</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>Name 1</td>
				<td><input type="date" name="task_date[1]" value=""></td>
				<td>
					<select name="select_date[1]"></select>
				</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Name 2</td>
				<td><input type="date" name="task_date[2]" value=""></td>
				<td>
					<select name="select_date[2]"></select>
				</td>
			</tr>
			<tr>
				<td>3</td>
				<td>Name 3</td>
				<td><input type="date" name="task_date[3]" value=""></td>
				<td>
					<select name="select_date[3]"></select>
				</td>
			</tr>
		</tbody>
	</table>
</form>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<style>
	#fd select:empty {
		display: none;
	}
	#fd table {
		table-layout: fixed;
	}
</style>
<script>
document.getElementById("fd").addEventListener("input", event => {
	const target = event.target;
	if(target.matches("[name^=task_date]")) {
		const select = target.form.querySelector(`[name="${target.name.replace("task", "select")}"`);
		select.textContent = "";
		if(!target.value) return;
		const date = new Date(target.value);
		for(let i = 0; i < 10; i++) {
			select.append(new Option(
				date.toLocaleDateString(navigator.language),
				date.toISOString().replace(/T.+$/, ""))
			);
			date.setDate(7 + date.getDate());
		}
	}
});	
</script>