Enable and Disable Dropdown on HTML Button Click

Question

I currently have a multiple row and column table with one of the columns containing dropdowns and one of the rows containing an Edit/Save button. The dropdowns in each row of my table are disabled on load. However, on the button click, that dropdown in that row is then enabled. Once the button is clicked again (which is then a save button) they should then be disabled.

I have it working, but it is only working for the top row as I am using getElementById . Everything I have tried for classes including getElementByClassName is not working for me.

I have found multiple examples of what I am trying to do, but they all seem to be dealing with just one dropdown, whereas I have many that I am dealing with.

So how can I get this to successfully work so that it will work for the corresponding row in which the button is pressed and not just the first row?

HTML Table:

<table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header">
            <th style="display: none">Product ID</th>
            <th class="skuRow">Major Category</th>
            <th class="skuRow">Minor Category</th>
            <th class="skuRow">Report Code</th>
            <th class="skuRow">SKU</th>
            <th class="skuRow">SKU Description</th>
            <th class="skuRow">SKU Status</th>
            <th class="skuRow">Create Date</th>
            <th class="skuRow">SKU Group</th>
            <th class="skuRow">Edit</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td style="display: none" class="prod_id" id="product_id-<?php echo intval ($row['Product_ID'])?>"><?php echo $row['Product_ID']?></td>
            <td class="major_cat" id="major_cat-<?php echo intval ($row['Major Category'])?>"><?php echo $row['Major Category']?></td>
            <td class="minor_cat" id="minor_cat-<?php echo intval ($row['Minor Category'])?>"><?php echo $row['Minor Category']?></td>
            <td class="rep_code" id="rep_code-<?php echo intval ($row['Product Report Code'])?>" align="center"><?php echo $row['Product Report Code']?></td>
            <td class="sku" id="sku-<?php echo intval ($row['SKU'])?>" align="center"><?php echo $row['SKU']?></td>
            <td class="sku_desc" id="sku_desc-<?php echo intval ($row['SKU Description'])?>"><?php echo $row['SKU Description']?></td>
            <td class="sku_status" id="sku_status-<?php echo intval ($row['SKU Status'])?>" align="center"><?php echo $row['SKU Status']?></td>
            <td class="create_date" id="create_date-<?php echo intval ($row['Date'])?>" align="center"><?php echo $row['Date']?></td>
            <td class="sku_group" id="sku_group-<?php echo intval ($row['SKU Group'])?>" align="center">

                <div>
                <select id="sku_group_dropdown" disabled>
                    <option
                        value=""
                        data-name="<?php echo $row ['SKU Group'];?>"
                    >
                        <?php echo $row ['SKU Group'];?>
                    </option>
                </select>
            </div>

                <!--<div><?php echo $row ['SKU Group'];?></div>-->
            </td>
            <td><input type="button" class="edit" name="edit" value="Edit"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

Lines of JavaScript I use to switch from disabled to enabled and vice versa. These are posted in different areas of my JS, but am only posting these 2 lines as they are the only lines of code that apply to my question:

document.getElementById("sku_group_dropdown").disabled=false;
document.getElementById("sku_group_dropdown").disabled=true;

Answer 1

please check this code

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
 <table id="skuTable" cellspacing="5" class="ui-widget ui-widget-content">
<thead>
    <tr class="ui-widget-header">
        <th style="display: none">Product ID</th>
        <th class="skuRow">Major Category</th>
        <th class="skuRow">Minor Category</th>
        <th class="skuRow">Report Code</th>
        <th class="skuRow">SKU</th>
        <th class="skuRow">SKU Description</th>
        <th class="skuRow">SKU Status</th>
        <th class="skuRow">Create Date</th>
        <th class="skuRow">SKU Group</th>
        <th class="skuRow">Edit</th>
    </tr>
</thead>
<tbody>



   <tr>
     <td>Test1</td>
     <td>
        <div>
            <select  disabled class="drop-down-list">
                <option
                    value=""
                    data-name="asdas">
                    Tesy1
                </option>
            </select>
        </div>


        </td>
        <td><input type="button" class="edit" onclick="enable_value(this)" name="edit" value="Edit"></td>
    </tr>

 <tr>
     <td>Test2</td>
     <td>
        <div>
            <select  disabled class="drop-down-list">
                <option
                    value=""
                    data-name="asdas">
                    Tesy2
                </option>
            </select>
        </div>


        </td>
        <td><input type="button" class="edit" onclick="enable_value(this)" name="edit" value="Edit"></td>
    </tr>

</tbody>
</table>

and this your function

 <script>
    function enable_value(event){
        if($(event).parent().parent().find('.drop-down-list').prop("disabled")){
            $(event).parent().parent().find('.drop-down-list').attr('disabled', false);
        } else {
             $(event).parent().parent().find('.drop-down-list').attr('disabled', true);
        }
    }
</script>