I'm creating a form that allows a user to select an amount of services, and then a total is displayed. I have it working to where I can keep the running total of one drop down menu service, but then I can't figure out how to add additional services from other drop down menus. For example, I need it so that if someone selects '3' from one drop down menu, it will times that value by 10 (I have that part done), but then also be able to select a '4' from the next dropdown menu and times that by a value, and then display a total.

Fiddle: https://jsfiddle.net/7jrch7w6/

I'm very new to JavaScript and JQuery, so feel free to give suggestions if you see a better way or if my code is garbage. Thanks!

Here's my code:

<form>
<div id="carpet-services">
                <div class="form-group">
                    <!--how many bedrooms-->
                    <label class="control-label" for="carpet_cleaning">Bedrooms</label>
                    <select class="form-control" id="carpet_cleaning">
                        <option value="0-bedroom">0</option>
                        <option value="1-bedroom">1</option>
                        <option value="2-bedroom">2</option>
                    </select>
                    <label class="hide" for="0-bedroom">0</label>
                    <label class="hide" for="1-bedroom">1</label>
                    <label class="hide" for="2-bedroom">2</label>
                    <!--how many dining rooms-->
                    <label class="control-label" for="dining_rooms">Dining Rooms</label>
                    <select class="form-control" id="dining_rooms">
                        <option value="0-diningRoom">0</option>
                        <option value="1-diningRoom">1</option>
                        <option value="2-diningRoom">2</option>
                    </select>
                    <label class="hide" for="0-diningRoom">0</label>
                    <label class="hide" for="1-diningRoom">1</label>
                    <label class="hide" for="2-diningRoom">2</label>
     </div>
  </div>

    <h4>Total Price</h4>
      <p id="output1"></p>

JS

    $("#carpet_cleaning").change(function () {
    var bedrooms = $("#carpet_cleaning").val();
    var diningRooms = $("#dining_rooms").val();
    var bedroomPrice = '';
    var diningRoomPrice = '';

    if (carpet_cleaning){
        var bedroomsLabel = $("label[for="+bedrooms+"]").text();
        bedroomPrice = 'Your price quote is: ' + bedroomsLabel * 10;
    }

    $("#output1").text(bedroomPrice).fadeIn();
});

One line of CSS: label.hide {display: none;}

First of all, there's no need to use labels for every drop down option, that's what value attribute is for:

<form>
    <div id="carpet-services">
                    <div class="form-group">
                        <!--how many bedrooms-->
                        <label class="control-label" for="carpet_cleaning">Bedrooms</label>
                        <select class="form-control" id="carpet_cleaning">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <!--how many dining rooms-->
                        <label class="control-label" for="dining_rooms">Dining Rooms</label>
                        <select class="form-control" id="dining_rooms">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
         </div>
      </div>

        <h4>Total Price</h4>
          <p id="output1"></p>
  </form>

Calculation can now be simplified and properly hooked up to change event of both drop downs:

$("#carpet_cleaning,#dining_rooms").change(function () {
        var bedrooms = $("#carpet_cleaning").val();
        var diningRooms = $("#dining_rooms").val();

        var total = bedrooms * 10 + diningRooms * 20;
        var totalPrice = 'Your price quote is: ' + total;

        $("#output1").text(totalPrice).fadeIn();
});

more