Modify UI further.

We need to modify the correspoding JavaScript for this. Try to reduce usage of
global variables there!

librarian/static/scripts/add-books/main.js

@@ -169,6 +169,9 @@ function renderDeleteButton(){
     return container;
 }
 
+/**
+Creates the DOM element that displays the name of the added person.
+*/
 function renderNameInput(creatorType, namePart){
     var placeholder = namePart.capitalize();
     var textbox = document.createElement("input");

librarian/templates/add_books.jinja

@@ -11,16 +11,16 @@
     <div class="row">
         <div class="col-md-11">
             <div class="input-group">
-                <input type="text" class="form-control single-liner-halves" placeholder="First name">
-                <input type="text" class="form-control single-liner-halves" placeholder="Last name">
+                <input type="text" class="form-control single-liner-halves" placeholder="Last name" id="{{creator_title}}-proxy-lastname">
+                <input type="text" class="form-control single-liner-halves" placeholder="First name" id="{{creator_title}}-proxy-lastname">
             </div>
         </div>
         <div class="col-md-1">
             <i class="fa fa-plus-circle fa-2x clickable" id="{{ creator_title }}-add"></i>
         </div>
     </div>
-    <span id="{{ creator_title }}-list">
-        <div class="row">
+    <ul id="{{ creator_title }}-list">
+        <!-- div class="row">
             <div class="col-md-5">
                 <input type="text" name="{{ creator_title }}-proxy-lastname" placeholder="Lastname" class="form-control">
             </div>
@@ -30,8 +30,8 @@
             <div class="col-md-2">
                 <i class="fa fa-minus-circle fa-2x clickable disabled"></i>
             </div>
-        </div>
-    </span>
+        </div -->
+    </ul>
 </div>
 {% endmacro %}