new container

app/static/js/films.js

@@ -7,9 +7,9 @@ function selectChanged() {
         const bVal = b.dataset[sortValue]
         return aVal < bVal ? -1 : 1
     })
-    document.getElementById('films').innerHTML = ''
+    document.getElementById('films-list').innerHTML = ''
     $films.forEach($film => {
-        document.getElementById('films').appendChild($film)
+        document.getElementById('films-list').appendChild($film)
     })
 }
 

app/templates/films.html

@@ -2,7 +2,7 @@
 {% block body_class%}animated animated-text{% endblock %}
 {% block main %}
 
-<div class="films" id="films">
+<div class="films">
 	<div>
 		<strong>Sort:</strong>
 		<select id="sort-select">
@@ -14,7 +14,8 @@
 			<option value="lightness">Lightness</option>
 		</select>
 	</div>
-{% for film in films %}
+	<div id="films-list">
+	{% for film in films %}
 		<div class="film"
 			data-position="{{ film.position }}"
 			data-title="{{ film.data.title }}"
@@ -33,7 +34,8 @@
 				{% endfor %}
 			</h2>
 		</div>
-{% endfor %}
+	{% endfor %}
+	</div>
 </div>
 {% endblock %}