Add button for new account entry when adding a transaction

Author: zombor

app/ledger/templates/layout.erb

@@ -32,6 +32,24 @@
         });
 
         $('.twitter-typeahead').css('display', 'inline');
+
+        var i=3;
+        $("#add_account_row").click(function(){
+          $("#account-"+i).html('<div class="col-sm-6"><input type="text" class="form-control typeahead" id="add_transaction_account_'+(i-1)+'" name="add_transaction_account[]" placeholder="Account"></div><div class="col-sm-6"><input type="text" class="form-control" id="add_transaction_value_'+(i-1)+'" name="add_transaction_value[]" placeholder="Value"></div>');
+          $("#account-"+i+" .typeahead").typeahead({
+            hint: true,
+            highlight: true,
+            minLength: 3
+          },
+          {
+            name: 'accounts',
+            source: search
+          });
+          i++;
+          $("div#accounts").append('<div class="form-group" id="account-'+i+'"></div>');
+
+          $('.twitter-typeahead').css('display', 'inline');
+        });
       });
     </script>
     <style>
@@ -146,26 +164,29 @@
 
               <fieldset>
                 <legend>Accounts</legend>
-                <div class="form-group">
-                  <div class="col-sm-6">
-                    <input type="text" class="form-control typeahead" id="add_transaction_account_0" name="add_transaction_account[]" placeholder="Account">
-                  </div>
-                  <div class="col-sm-6">
-                    <input type="text" class="form-control" id="add_transaction_value_0" name="add_transaction_value[]" placeholder="Value">
-                  </div>
-                </div>
-                <div class="form-group">
-                  <div class="col-sm-6">
-                    <input type="text" class="form-control typeahead" id="add_transaction_account_1" name="add_transaction_account[]" placeholder="Account">
+                <div id="accounts">
+                  <div class="form-group" id="account-1">
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control typeahead" id="add_transaction_account_0" name="add_transaction_account[]" placeholder="Account">
+                    </div>
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control" id="add_transaction_value_0" name="add_transaction_value[]" placeholder="Value">
+                    </div>
                   </div>
-                  <div class="col-sm-6">
-                    <input type="text" class="form-control" id="add_transaction_value_1" name="add_transaction_value[]" placeholder="Value">
+                  <div class="form-group" id="account-2">
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control typeahead" id="add_transaction_account_1" name="add_transaction_account[]" placeholder="Account">
+                    </div>
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control" id="add_transaction_value_1" name="add_transaction_value[]" placeholder="Value">
+                    </div>
                   </div>
+                  <div class="form-group" id="account-3"></div>
                 </div>
                 <div class="form-group">
                   <div class="col-sm-10"></div>
                   <div class="col-sm-2">
-                    <button type="button" class="btn btn-success btn-sm">
+                    <button type="button" id="add_account_row" class="btn btn-success btn-sm">
                       <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                     </button>
                   </div>