title: How to select options from two different dropdowns of same css class name using javascript or jquery
body: <p>I want to update values of two dropdowns as shown in attached image, have a look on html code for the same(using same css proprty for both select)</p>
  
  <pre><code>&lt;div class="container-fluid" role="main" style="margin-top: 100px;"&gt;
      &lt;form id="allPhotoForm"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;
                  Total Pending photos : ${count} &lt;input type="button"
                      id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
                      value="Update All"&gt;
              &lt;/legend&gt;
          &lt;/fieldset&gt;
          &lt;div class="checkbox"&gt;
              &lt;label&gt; &lt;input type="checkbox" class="checkbox1"
                  id="selecctall"&gt; Select All
              &lt;/label&gt;
          &lt;/div&gt;
  &lt;select class="form-control" name="status" id="${imageId}"&gt;
                      &lt;option value="APPROVED"&gt;Approved&lt;/option&gt;
                      &lt;option value="REJECTED"&gt;Rejected&lt;/option&gt;
                      &lt;option value="PENDING"&gt;Pending&lt;/option&gt;
  &lt;/select&gt; 
  Reason : &lt;span style="float: right;"&gt; 
      &lt;select class="form-control" name="status"&gt;
                  &lt;option value="Animal" id="animal"&gt;Animal&lt;/option&gt;
                  &lt;option value="Bad" id="bad"&gt;Bad&lt;/option&gt;
                  &lt;option value="Baby" id="baby"&gt;Baby&lt;/option&gt;
                  &lt;option value="Celebrity" id="celebrity"&gt;Celebrity&lt;/option&gt;
                  &lt;option value="Flower" id="flower"&gt;Flower&lt;/option&gt;
                  &lt;option value="God" id="god"&gt;God&lt;/option&gt;
                  &lt;option value="Good" id="good"&gt;Good&lt;/option&gt;
                  &lt;option value="Others" id="others"&gt;Others&lt;/option&gt;
      &lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;div class="checkbox"&gt;&lt;label&gt; &lt;input type="checkbox" class="checkbox1 status" value="id=${id}&amp;objectId=${imageId}&amp;status=&amp;reason="&gt;Check me out
                                      &lt;/label&gt;
                                  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/g6Hrk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6Hrk.png" alt="enter image description here"></a></p>
  
  <p>AJAX code for the same is as follows which binds all input data and pushes to API</p>
  
  <pre><code>$('#allPhotoFormBtn').on(
              "click",
              function(event) {
                  event.preventDefault();
                  var allCheckBox = document.querySelectorAll('.status');
                  var data = [];
                  $(allCheckBox).each(
                          function(index) {
                              if ($(this).is(':checked')) {
                                  var status = $(
                                          $(this).parent().parent().prev())
                                          .val();
                                  data.push($(this).val().replace("status=",
                                          "status=" + status));
                              }
                          });
                  $.ajax({
                      url : "/curation/updateAll",
                      data : {
                          'data' : data.join(',')
                      },
                      type : "POST",
                      success : function(response) {
                          if (response)
                              location.reload();
                      },
                      error : function(rs) {
                          console.log(rs);
                      }
                  })
              });
  </code></pre>
  
  <p>I am able to fetch one drop down value successfully, but unable to fetch another one, below statement gives only one dropdown value but not both.</p>
  
  <pre><code>var status = $($(this).parent().parent().prev()).val();
  </code></pre>