title: Selecting a form's information when we have multiple forms with same ids in javascript
body: <p>I have multiple forms on the html page with same ID. 
  <br>I want to send forms information to the server which user selected .I also searched a lot about this and couldn't find anything related.
  <br>for my Authorization policy i need to send request with bearer header
  <br>
  my problem is when i submit form 2 my js code send form 1 value 
  <br>i cant use specific id for each of my form because i have a lot of forms<br>
  <br>
  <strong>how can i do that???</strong></p>
  
  <p>P.S. I'd gladly delete the question if there's any duplicate in all SO forums.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var InputNumber = document.querySelectorAll('input[id=InputNumberNewMenu]');
    for (i = 0; i &lt; InputNumber.length; i++) {
      if (InputNumber[i].value !== "") {
        var InputName = InputNumber[i].value;
      }
    }
    var InputDate = document.querySelector('input[id=InputDate]').value;
    var RestaurantId = document.querySelector('input[id=RestaurantId]').value;
    var foodId = document.querySelector('input[id=foodId]').value;
    var address = document.querySelector('input[id=address]:checked').value;
    var token = localStorage.getItem('token');
    var getUrl = window.location;
    var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[0];
    $.ajax({
      type: 'POST',
      url: baseUrl + '/api/order/add',
      dataType: "json",
      contentType: 'application/json',
      data: JSON.stringify({
        number: InputName,
        restaurant_id: RestaurantId,
        food_id: foodId,
        order_date: InputDate,
        address: address
      }),
      beforeSend: function(xhr) {
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Authorization', 'Bearer ' + token);
      },
      success: function(data) {
        var ipg = data.data.url;
        window.location.replace(ipg);
      },
      error: function(data) {
  
      }
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form enctype="multipart/form-data" id="form" style="text-align: center"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="InputNumberNewMenu" style="margin-top: 8px"&gt;number&lt;/label&gt;
      &lt;div class="row" style="display: flex;direction: ltr;justify-content: center;"&gt;
        &lt;div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value"&gt;-&lt;/div&gt;
        &lt;input type="number" id="InputNumberNewMenu" value="1" /&gt;
        &lt;div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"&gt;+&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="address"&gt;address:&lt;/label&gt;
      &lt;input type="radio" id="address" name="address" value="1" required&gt; address1 &lt;br&gt;
      &lt;input type="radio" id="address" name="address" value="2" required&gt; address2 &lt;br&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="form-control" id="InputDate" value="2018-12-16"&gt;
    &lt;input type="hidden" class="form-control" id="RestaurantId" name="restaurant_id" value="1"&gt;
    &lt;input type="hidden" class="form-control" id="foodId" name="food_id" value="1"&gt;
    &lt;button type="button" onclick="myFunction()" class="btn btn-primary"&gt;submit &lt;/button&gt;
  &lt;/form&gt;
  &lt;form enctype="multipart/form-data" id="form" style="text-align: center"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="InputNumberNewMenu" style="margin-top: 8px"&gt;number&lt;/label&gt;
      &lt;div class="row" style="display: flex;direction: ltr;justify-content: center;"&gt;
        &lt;div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value"&gt;-&lt;/div&gt;
        &lt;input type="number" id="InputNumberNewMenu" value="1" /&gt;
        &lt;div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value"&gt;+&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="address"&gt;address:&lt;/label&gt;
      &lt;input type="radio" id="address" name="address" value="1" required&gt; address1 &lt;br&gt;
      &lt;input type="radio" id="address" name="address" value="2" required&gt; address2 &lt;br&gt;
    &lt;/div&gt;
    &lt;input type="hidden" class="form-control" id="InputDate" value="2018-12-16"&gt;
    &lt;input type="hidden" class="form-control" id="RestaurantId" name="restaurant_id" value="1"&gt;
    &lt;input type="hidden" class="form-control" id="foodId" name="food_id" value="2"&gt;
    &lt;button type="button" onclick="myFunction()" class="btn btn-primary"&gt;submit &lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>