django インラインフォームセットの表示方法

こちらのサイトを参考に動的フォームを作成し、div class="box"の中に一つずつフォームセットを入れたいのですがbox外に作成されてしまいます。
<div class="box">と<div id="file-area">の位置を変えたり、for文の中に書いたりしたのですが結果は同じでした。

html
1{% extends 'app/base.html' %}
2
3{% block content %}
4<form action="" method="post" enctype="multipart/form-data">
5    <h2>貯金</h2>
6    {{ form.as_p }}
7
8    <h2>貯金箱</h2>
9    {{ formset.management_form }}
10    <div class="row">
11            <div id="file-area">
12                <div class="box">    
13                {% for file_form in formset %}
14                    {{ file_form.as_p }}
15                {% endfor %}
16                 </div>    
17            </div>
18    </div>
19    {% csrf_token %}
20    <button type="submit" class="btn btn-primary">送信</button>
21    <button id="add" type="button" class="btn btn-primary">ファイルの追加</button>
22</form>
23
24{% endblock %}
25
26{% block extrajs %}
27<script>
28$(function(){
29    var totalManageElement = $('input#id_file_set-TOTAL_FORMS');
30    var currentFileCount = parseInt(totalManageElement.val());
31    $('button#add').on('click', function(){
32        var nameElement = $('<input>', {
33            type: 'name',
34            name: 'file_set-' + currentFileCount + '-name',
35            id: 'id_file_set-' + currentFileCount + '-name',
36        });
37        var fileElement = $('<input>', {
38            type: 'file',
39            name: 'file_set-' + currentFileCount + '-src',
40            id: 'id_file_set-' + currentFileCount + '-src',
41        });
42        var contentElement = $('<textarea>', {
43            type: 'textarea',
44            name: 'file_set-' + currentFileCount + '-content',
45            id: 'id_file_set-' + currentFileCount + '-content',
46        });
47        $('div#file-area').append(nameElement,fileElement,contentElement);
48        currentFileCount += 1;
49        totalManageElement.attr('value', currentFileCount);
50    });
51});
52</script>
53{% endblock %}