How to select options from two different dropdowns of same css class name using javascript or jquery

Question

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)

<div class="container-fluid" role="main" style="margin-top: 100px;">
    <form id="allPhotoForm">
        <fieldset>
            <legend>
                Total Pending photos : ${count} <input type="button"
                    id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
                    value="Update All">
            </legend>
        </fieldset>
        <div class="checkbox">
            <label> <input type="checkbox" class="checkbox1"
                id="selecctall"> Select All
            </label>
        </div>
<select class="form-control" name="status" id="${imageId}">
                    <option value="APPROVED">Approved</option>
                    <option value="REJECTED">Rejected</option>
                    <option value="PENDING">Pending</option>
</select> 
Reason : <span style="float: right;"> 
    <select class="form-control" name="status">
                <option value="Animal" id="animal">Animal</option>
                <option value="Bad" id="bad">Bad</option>
                <option value="Baby" id="baby">Baby</option>
                <option value="Celebrity" id="celebrity">Celebrity</option>
                <option value="Flower" id="flower">Flower</option>
                <option value="God" id="god">God</option>
                <option value="Good" id="good">Good</option>
                <option value="Others" id="others">Others</option>
    </select>
</span>

and

<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
                                    </label>
                                </div>

AJAX code for the same is as follows which binds all input data and pushes to API

$('#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);
                    }
                })
            });

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.

var status = $($(this).parent().parent().prev()).val();

Answer 1

You are searching all dropdowns in the DOM by the css class ".status" but, in your code, dropdowns have not css class but both a "name" attribute set to status. So either you change your dropdowns adding class="status" or you have to change the way you search for them in js. By the way in html 4 having more elements with same name attribute is legit but not reccomended, in html 5 now is consider error. In your case you can modify your html like this:

<select class="form-control" class="status" id="${imageId}">
                <option value="APPROVED">Approved</option>
                <option value="REJECTED">Rejected</option>
                <option value="PENDING">Pending</option>
</select> 
Reason : <span style="float: right;"> 
<select class="form-control" class="status">
            <option value="Animal" id="animal">Animal</option>
            <option value="Bad" id="bad">Bad</option>
            <option value="Baby" id="baby">Baby</option>
            <option value="Celebrity" id="celebrity">Celebrity</option>
            <option value="Flower" id="flower">Flower</option>
            <option value="God" id="god">God</option>
            <option value="Good" id="good">Good</option>
            <option value="Others" id="others">Others</option>
</select>

without changing your js.