Не работает добавление блоков в галлерею. Как исправить?

Question

Антон Волков @NoName0

Веб-разработка

Не работает добавление блоков в галлерею. Как исправить?

не работает и выдаёт ошибку последняя строка кода

<!DOCTYPE html>
<html lang="ru">
<head>
	<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
	<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
	<meta charset="UTF-8">
	<title>test</title>
</head>
<style>
	*{
		color: #FFFFFF;
		font: 150% sans-serif;
	}
	body{
		margin: 0;
		background: #00FF68;
	}
	#wrapper{

	}
	.container {
		width: 81%;
		margin: auto;
		text-align: center;
		background: #FFF7A3;
	}

	.block {
		display: inline-block;
		background: #A969FF;
		width: 300px;
		height: 300px;
		margin: 10px;
		background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQO51nB3ZcxDEcMWTk5tZVrYos-l2JvyvznCk3WFqGZ6JUIlYJc);
		background-size: cover;
	}
	#ButtonAddBlockGal{
		display: inline-block;
		background: #FF8300;
		margin: 10px;
		width: 300px;
		height: 300px;
	}
	#newBlock{
			display: inline-block;
		background: #A969FF;
		width: 300px;
		height: 300px;
		margin: 10px;
		background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQO51nB3ZcxDEcMWTk5tZVrYos-l2JvyvznCk3WFqGZ6JUIlYJc);
		background-size: cover;
		transition: 2s;
	}
</style>

  <body>
    <div class="container">
      <div class="block">1</div>
      <div class="block">2</div>
      <div class="block">3</div>
      <div class="block">4</div>
      <div class="block">5</div>
      <div class="block">6</div>
      <div class="block">7</div>
      <div class="block">8</div>
      <div class="block">9</div>
      <div class="block">10</div>
      <div class="block">11</div>
      <div class="block">12</div>
      <div class="block">13</div>
      <div class="block">14</div>
      <div class="block">15</div>
		<div id="ButtonAddBlockGal">+</div>
    </div>
  </body>
</html>

<script>
	var ButtonAddBlockGal = document.getElementById('ButtonAddBlockGal');
	var block = document.getElementById('block');
	var countGal = 15;
	var container = document.getElementById('container');

	ButtonAddBlockGal.addEventListener('click' , function () {
		var newBlock = document.createElement('div');
		newBlock.id = 'newBlock';
		countGal++;
		newBlock.innerHTML = countGal;

		container.appendChild(newBlock);
	});
</script>

нужно что - бы элементы добавлялись перед кнопкой и после блоков с #block