How do you show dropdownlist boxes on the row that you checked with a checkbox in a web grid?

Question

I have figured out so far how to make rows in the web grid green, but I have not figured out how to show dropdownlist boxes on the row that I check of a checkbox as of yet. Any help would be appreciated greatly! I would like to be able to select the dropdown list location on the same row that I check and have the data on that row move to the location section of the empty row. J-Query seems to be the easiest way, but any other ways of learning to do this would be awesome! I can make the dropdown boxes show at the very top, but have no idea how to make them show up on the row I checked???

[Code]
//================== Checkbox Selection/Control =====================
    
    //First hide all the listboxes in the webGrid.
    $(".RowLocationDropDownList").hide();
    $(".RowSectionDropDownList").hide();

    
    //Check the box and the row turns red that is checked.
    $('.SelectedMoveIsChecked').click(function () {

        var backgroundColor = $(this).is(":checked") ? "#EE4B2B;" : ""; //Red Color.
        
        $(this).closest('tr').attr('style', 'background-color: ' + backgroundColor + ''); 
        $(document).filter('#TrailerNumber'!='').find('.SelectedMoveIsChecked[type="checkbox"]:checked').closest(function () {
            $('#RowLocationDropDownList').show(),
                    $('#RowSectionDropDownList').show();
          
        }).change();
        
        
        //================ Change Background Color upon Selection ==============

        //Turns all rows Green that have empty TrailerNumber values.
        $("#content tbody tr").each(function (i, row) {
            var $actualRow = $(row);
            if ($actualRow.find('#TrailerNumber').val() == '') {
                $actualRow.css('background-color', '#AFE1AF'); //Green Color.
                
            }
  
        });
       
    });

    //Change the background colors using checkbox based on conditions.
    $('input[type=checkbox]').click(function () {
        $(this).closest('tr')
            .find('input[type=checkbox]').prop('background-color', '#AFE1AF')//Green
            .attr('enabled', this.not.checked);
        
        //Added for when the checkbox is checked.
        var tdIndex = $(this).closest('td').index();
        $('table').find("tr (" + tdIndex + ")")
         

            .attr('enabled', this.checked);
        

        
         //======================== Control elements not checked =======================
        //Hide elements that are not checked.
        
        $(document).ready(function () {
           
            $('input[type=checkbox]').each(function () {
                //Check if the box is checked
                var x = $(this).is(':checked');
               
                //if checkbox is NOT checked
                if (x === false) {
                    //Hide the choice
                    $(this).is(':checked');
                    $(this).parent().hide();
                  
                    document('.SelectedMoveIsChecked').onclick = function () {
                        $('.RowSectionDropDownList').fadeIn(200);
                    };

                   

                } 

            }); 

        })
    });
      [/Code]

How this works: The user changes the list shown using the Section boxes at the top and/or two drop-down boxes at the top.

The drop-down boxes on the row (to be shown) where the checkbox is checked (not at the top of the list). I cannot figure out how to show the drop-down list boxes (Location and Section) on the row that I checked??? Any help would be greatly appreciated!

//================== Checkbox Selection/Control =====================

//First hide all the listboxes in the webGrid.
$(".RowLocationDropDownList").hide();
$(".RowSectionDropDownList").hide();

//Check the box and the row turns red that is checked.
$('.SelectedMoveIsChecked').click(function() {
  var backgroundColor = $(this).is(":checked") ? "#EE4B2B;" : ""; //Red Color.
  $(this).closest('tr').attr('style', 'background-color: ' + backgroundColor + '');
  $(document).filter('#TrailerNumber' != '').find('.SelectedMoveIsChecked[type="checkbox"]:checked').closest(function() {
    $('#RowLocationDropDownList').show(),
      $('#RowSectionDropDownList').show();
  }).change();
  //================ Change Background Color upon Selection ==============
  //Turns all rows Green that have empty TrailerNumber values.
  $("#content tbody tr").each(function(i, row) {
    var $actualRow = $(row);
    if ($actualRow.find('#TrailerNumber').val() == '') {
      $actualRow.css('background-color', '#AFE1AF'); //Green Color.
    }
  });
});

//Change the background colors using checkbox based on conditions.
$('input[type=checkbox]').click(function() {
  $(this).closest('tr')
    .find('input[type=checkbox]').prop('background-color', '#AFE1AF') //Green
    .attr('enabled', this.not.checked);
  //Added for when the checkbox is checked.
  var tdIndex = $(this).closest('td').index();
  $('table').find("tr (" + tdIndex + ")")
    .attr('enabled', this.checked);
  //======================== Control elements not checked =======================
  //Hide elements that are not checked.
  $(document).ready(function() {
    $('input[type=checkbox]').each(function() {
      //Check if the box is checked
      var x = $(this).is(':checked');
      //if checkbox is NOT checked
      if (x === false) {
        //Hide the choice
        $(this).is(':checked');
        $(this).parent().hide();
        document('.SelectedMoveIsChecked').onclick = function() {
          $('.RowSectionDropDownList').fadeIn(200);
        };
      }
    });
  })
});

.woops{color:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woops">I have to imagine the HTML, please update me<div>

Answer 1

Figured it out to where when TrailerNumber is populated the drop-down list boxes show there.

 [Code]
                    //Turns all rows Green that have empty TrailerNumber values.
            $("#content tbody tr").each(function (i, row) {
                var $actualRow = $(row);
                var $actualRowGreen = $(row);

                if ($actualRowGreen.find('#TrailerNumber').val() === '') {

                    $actualRowGreen.css('background-color', '#AFE1AF'); //Green Color.

                };
                
                if ($actualRow.find('#TrailerNumber').val() != '') {

                    $actualRow.find('#RowSectionDropDownList').fadeIn(700).show(),
                        $actualRow.find('.RowLocationDropDownList').fadeIn(700).show(); //('.SelectedMoveIsChecked').is(checked);
                };
            });
        });

WebGrid CHTML Page:

            <hr />
            <div id="content">
                @webGrid.GetHtml(tableStyle: "webgrid-table",
headerStyle: "webgrid-header",
footerStyle: "webgrid-footer",
displayHeader: true,
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
mode: WebGridPagerModes.All,
htmlAttributes: new { @id = "webGrid", @class = "Grid" },
columns: webGrid.Columns(
  webGrid.Column(header: "Actions", format:@<span class="link">
        <!--Add Checkbox here-->
        <!-- Note: We can add clickable rows as an option for user. -->
        @Html.CheckBoxFor(model => model.SelectedMoveIsChecked, new { 
   @Class = "SelectedMoveIsChecked", @id = "SelectedMoveIsChecked" })
        <!-- Html.CheckBox("isActive", false, item.isSelectdRow, true, 
 new { id = "CheckBoxSelectedBeginMove", Class = "CheckBoxIsSelected" })
        Html.CheckBoxFor(Model.Input_Location, item.isSelectdRow, new {  = "'SelectedRows'", data_val = item.Location })
            -->
        <a class="Edit" href="javascript:;">Edit</a>
        <a class="Clear" href="javascript:;">Clear</a>
        <a class="Update" href="javascript:;" style="display:none">Update</a>
        <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
    </span>),

  webGrid.Column(header: "LocationID", format: @<span class="label"> 
  <a>@item.LocationID</a></span>, style: "LocationID"),

   webGrid.Column(header: "UserName", format: @<span class="label"> 
  <a>@item.UserName</a></span>, style: "UserName"),


  webGrid.Column(header: "Location", format: @<span>

@Html.DropDownListFor(model => model.LocationList, Model.LocationList, 
"Location", new { @id = "RowLocationDropDownList", @class = 
"RowLocationDropDownList", @visibility = "hidden", @placeholder = "Location" })
<input id="Location" class="inputEditData" type="text" value="@item.Location" style="display:none" placeholder="Location" />
<span class="label"><a>@item.Location</a></span>
 </span>, style: "Location"),

  webGrid.Column(header: "Section", format: @<span>
@Html.DropDownListFor(model => model.SectionList, Model.SectionList, "Section", new { @id = "RowSectionDropDownList", @class = "RowSectionDropDownList", @visibility = "hidden", @placeholder = "Section" })
<input id="Section" class="inputEditData" type="text" value="@item.Section" style="display:none" placeholder="Section" />
<span class="label"><a>@item.Section</a></span>
 </span>, style: "Section"),

  webGrid.Column(header: "TrailerNumber", format: @<span>
<span class="label"><a>@item.TrailerNumber</a></span>
<input id="TrailerNumber" class="inputEditData" type="text" value="@item.TrailerNumber" style="display:none" placeholder="TrailerNumber" />
  </span>, style: "TrailerNumber"),

  webGrid.Column(header: "CarrierName", format: @<span>
<span class="label"><a>@item.CarrierName</a></span>
<input id="CarrierName" class="inputEditData" type="text" 
 value="@item.CarrierName" style="display:none" placeholder="CarrierName" />
  </span>, style: "CarrierName"),

  webGrid.Column(header: "LoadCommodityStatus", format: @<span>
<span class="label"><a>@item.LoadCommodityStatus</a></span>
<input id="LoadCommodityStatus" class="inputEditData" type="text" 
  value="@item.LoadCommodityStatus" style="display:none" 
  placeholder="LoadCommodityStatus" />
   </span>, style: "LoadCommodityStatus"),

      webGrid.Column(header: "DateLoaded", format:

      @<span class="label"><a>@item.DateLoaded</a></span>, style: "DateLoaded"),

  webGrid.Column(header: "PlantLocation", format: @<span>
<span class="label"><a>@item.PlantLocation</a></span>
<input id="PlantLocation" class="inputEditData" type="text" value="@item.PlantLocation" style="display:none" placeholder="PlantLocation" />
    </span>, style: "PlantLocation")))
            </div>
            <div id="RowCountBpttom"><b>Records: @firstRecord - 
    @lastRecord of @webGrid.TotalRowCount</b></div>

        </div>
        <br /><br />
        <div class="WebGridTable">

        </div>

        @if (webGrid.HasSelection)
        {
            //SelectedMoveIsChecked
            //Get the values:
            //var LocationID = webGrid.SelectedRow.Value.LocationID; 
         //Note: ID is autogenerated.
            var Location = webGrid.SelectedRow.Value.Location;
            var Section = webGrid.SelectedRow.Value.Section;
            var TrailerNumber = webGrid.SelectedRow.Value.TrailerNumber;
            var CarrierName = webGrid.SelectedRow.Value.CarrierName;
            var LoadCommodityStatus = 
    webGrid.SelectedRow.Value.LoadCommodityStatus;
            var DateLoaded = webGrid.SelectedRow.Value.DateLoaded;
            var PlantLocation = webGrid.SelectedRow.Value.PlantLocation;


            int SelectedMovesCount = webGrid.SelectedRow.Count() + 1; //Add Selected Move once confirmed.

            //logic
        }



    </form>
 [/Code]