Показать всплывающее окно с использованием вложенных данных

Question

Мой первый "Datalist1" получает некоторые значения из базы данных, т.е.

Идентификатор автобусного маршрута, номер транспортного средства, дата поездки, название станции отправителя автобуса, название пункта назначения автобуса

Другой "вложенный Datalist", который находится внутри datalist1, отображает значки "Шины" для этапов в соответствии с количеством этапов между источником и пунктом назначения. Мне удалось правильно получить данные и отобразить всплывающее окно, используя приведенные выше сведения.

<asp:DataList ID="DataList1" runat="server" RepeatColumns="1" CellSpacing="3" RepeatLayout="Table" BackColor="LightGray" OnItemDataBound="DataList1_DataBinding">
  <ItemTemplate>
    <table class="table">
      <tr style="background-color : #b62a26;  font-size:medium ; font-family:Verdana; height:40px ">
        <td style="padding-left:5px">
          <asp:Label ID="lblTrip" runat="server" Text="TripID:" ForeColor="White"></asp:Label>
        </td>
        <td style="width:900px; ">
          <b> <asp:Label ID="lblTripID" runat="server" Text='<%# Eval("TripID") %>' ForeColor="White"></asp:Label></b></td>
        </td>
      </tr>
      <tr style="background-color: white;  font-size:small  ; font-family:Verdana; height:60px;  ">
        <td colspan="2">
          <b>RouteID: </b></b>
          <asp:Label ID="lblRouteID" runat="server" Text='<%# Eval("RouteID") %>'></asp:Label>

          <b>Vehicle NO: </b>
          <asp:Label ID="lblVehicleNo" runat="server" Text='<%# Eval("VehicleNo") %>'></asp:Label>
          <b>TripDate: </b>
          <asp:Label ID="lblTripDate" runat="server" Text='<%# Eval("TripDate") %>'></asp:Label>
          <b>From: </b>
          <asp:Label ID="lblFromStage" runat="server" Text='<%# Eval("FromStage") %>'></asp:Label>
          <b>To: </b>
          <asp:Label ID="lblToStage" runat="server" Text='<%# Eval("ToStage") %>'></asp:Label>

        </td>
      </tr>
      <tr style="background-color: white;  font-size:small ; font-family:Verdana; height:10px ">
        <td style="width:10px"></td>
        <td>

          <div id="activeBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
            <asp:DataList ID="innerDataList1" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white">
              <ItemTemplate>
                <asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
                  <table>
                    <tr style=" align-items:center ">
                      <td>
                        <asp:ImageButton ID="imgactiveBtn" runat="server" src="\images\ActiveRed.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Track Details" />
                        <%--    <asp:ImageButton ID="ImageButton1" src="\images\ActiveRed.png" runat="server" Style="cursor: pointer"  Width="15px" Height="15px" OnClientClick="return LoadDiv(this.src);"/> --%>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" Font-Names="Verdana" ></asp:Label></b>
                      </td>
                    </tr>
                  </table>
                </asp:Panel>
              </ItemTemplate>
            </asp:DataList>
          </div>

          <div id="inactiveBus" style="line-height: 0px; float: left; margin: 0px; padding: 0px; display: inline-block; vertical-align: top;">
            <asp:DataList ID="innerDataList" runat="server" RepeatColumns="10" CellSpacing="3" BackColor="white" OnItemDataBound="innerDataList_ItemDataBound">
              <ItemTemplate>
                <asp:Panel ID="Panel2" runat="server" HorizontalAlign="center">
                  <table>
                    <tr style=" align-items:center ">
                      <td>
                        <asp:ImageButton ID="imginactiveBtn" runat="server" src="\images\InActive.png" Width="15px" Height="15px" OnClick="imgBtn_Click" ToolTip="Not Reached yet!" />
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <b><asp:Label ID="lblStageName" runat="server" Text='<%# Eval("StageName") %>' Font-Size="XX-Small" ForeColor="#CCCCFF"></asp:Label></b>
                      </td>
                    </tr>
                  </table>
                </asp:Panel>
              </ItemTemplate>
            </asp:DataList>
          </div>
        </td>
      </tr>
    </table>
  </ItemTemplate>
</asp:DataList>
<div id="dialog" style="display: none">
        <br />
        <b>RouteID:</b> <span id="RouteID1"></span> <label id="lblEmpId"></label>
        <br />
        <b>TripDate:</b> <span id="TripDate1"></span> <label id="lblEmpName"></label>
        <br />
        <b>Stage Name:</b> <span id="StageName1"></span><label id="lblEmpLocation"></label>
        <br />
        <b>Scheduled Arrival:</b> <span id="Scheduled_Time1"></span>
       <br />
        <b>Reached On:</b> <span id="Arrival_Time1"></span>
       <br /><br />
    </div>

Код Jquery:

$(document).on("click", "[id*=imginactiveBtn]", function () {
  $("#RouteID1").html($(".RouteID", $(this).closest("tr")).html());
  $("#TripDate1").html($(".TripDate", $(this).closest("tr")).html());
  $("#StageName1").html($(".StageName", $(this).closest("tr")).html());
  $("#Scheduled_Time1").html($(".Scheduled_Time", $(this).closest("tr")).html());
  $("#Arrival_Time1").html($(".Arrival_Time", $(this).closest("tr")).html());

  // Get the Current Row and its values.
  var currentRow = $(this).parents("tr");
  var RId = currentRow.find("span[id*='lblRouteID']").text();
  var TDate = currentRow.find("span[id*='lblTripDate']").text();
  var SName = currentRow.find("span[id*='lblStageName']").text();
  // Populate labels inside the dailog.
  $("#lblEmpId").text(RId);
  $("#lblEmpName").text(TDate);
  $("#lblEmpLocation").text(SName);

  $("#dialog").dialog({
    title: "Track Vehicle at <em>" + SName + "</em>",
    buttons: {
        Ok: function () {
            $(this).dialog('close');
        }
    },
    modal: true
  });

  return false;
});

Например, предположим, что 12/10/2017 2 поездки были активны с 1 и 2 идентификаторами Route ID, и каждый маршрут имеет 3 этапа.

При нажатии на первом этапе маршрута 1 всплывающее окно должно отображать:

Route ID: Route1 
TripDate: 12/10/2017 
Stage Name: Stage1

При нажатии на второй значок должно появиться всплывающее окно

RouteID: Route1
TripDate: 12/10/2017 
Stage: Stage2 and so on...

Аналогично, когда щелкают этапы Route2

Route ID: Route2 
TripDate: 12/10/2017 
Stage Name: Stage1 

и когда он нажимает второй этап Маршрута 2

Route ID: Route2 
TripDate: 12/10/2017 
Stage Name: Stage2 and so on..... 

Но Popup отображает:

RouteID: Route1Route2 
TripDate: 12/10/201712/10/2017 
StageName: Stage1Stage2Stage3Stage1Stage2Stage3 

для всех 3 этапов маршрута 1 и для всех 3 этапов маршрута 2.

Как я могу решить это. Где я делаю это неправильно?