title: Button click only works once
body: <p>I have a button which appends a new input element to the end of the "forPassengers" div once it's clicked, but it only works once. After one click it's not clickable anymore.</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>app
  .controller('multipleFlightsController', function ($scope, $http, $location) {
      $scope.addPassenger = function () {
          document.getElementById('forPassengers')
              .innerHTML += '&lt;input class="form-control airport ng-pristine ng-untouched ng-valid" type="text" ng-model="additionalPassengers" placeholder="#" tabindex="0" aria-invalid="false"&gt; ';
      };
   /*..... more code*/
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="forPassengers" class="col-lg-2 form-group"&gt;
      &lt;label&gt;# of other passengers&lt;/label&gt;
      &lt;button id="buttonForPassenger" type="button" class="btnBlue" ng-click="addPassenger()"&gt;Add passenger&lt;/button&gt;
      &lt;input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#"&gt;
      &lt;input class="form-control airport" type="text" ng-model="additionalPassengers" placeholder="#"&gt;
   &lt;/div&gt;
  </code></pre>
  
  <h2><strong>WORKING SOLUTION (edit)</strong></h2>
  
  <p>Eventually what solved my problem was actually using AngularJS instead of accessing the input element through the document.getElementById function.</p>