2 modals perdendo valor

Olá!

Estou com dificuldade para usar dois modals, a instrução está carregando sempre informações do primeiro da lista.

Quando clico no ticket ele abre um modal perguntando se quero agendar ou encerrar, quando clico em encerrar ele abre um modal com todos os dados do ticket para eu fazer a anotação e encerrar o ticket porém ele pegando o Id somente do  primeiro ticket mesmo eu selecionando o ticket de númeração 8 ele carrega o número 1

Alguém pode me ajudar, por favor?

	    <tbody>

	        @foreach (var item in @Model.Tickets)

	        {

	            <tr onclick="document.getElementById('id01').style.display='block'">

	                <td>@item.Id</td>

	                <td>@item.Situacao</td>

	                <td>@item.Assunto</td>

	                <td>@item.Contato</td>

	                <td>@item.Usuario.Nome</td>

	            </tr>

	            <td class="w3-container">

	                <div id="id01" class="w3-modal" style="border: 0px solid red;">

	                    <div class="w3-modal-content" style="width: 26%;">

	                        <div class="w3-container" style="padding: 40px;">

	                            <p>Quero:</p>

	                            <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>

	                            <button data-value="@item.Id" class="btnEdit" onclick="javascript:void(0)" style="background:#0094ff; color:#fff; font-weight:bold; border:none; padding:30px;">Agendar</button>

	                            <button data-value="@item.Id" class="btnEditE" onclick="javascript:void(0)" style="background:#0094ff; color:#fff; font-weight:bold; border:none; padding:30px;">Encerrar</button>

	                        </div>

	                    </div>

	                </div>

	            </td>

	        }

	    </tbody>

	 

	<div id="dialog" title="Alterar" style="overflow: hidden; border: 0px solid red;"></div>

	<div id="dialogE" title="Encerrar" style="overflow: hidden; border: 0px solid red;"></div>

	 

	@section Scripts{

	    <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>

	    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

	    <script type="text/javascript">

	        $(function () {

	            var id = 0;

	            $(document).on('click', '.btnEdit', function () {

	                id = $(this).attr("data-value");

	                $('#dialog').dialog('open');

	            });

	            $('#dialog').dialog({

	                autoOpen: false,

	                width: 400,

	                resizable: false,

	                title: 'Alterar Ticket',

	                modal: true,

	                open: function (event, ui) {

	                    $(this).load("@Url.Action("PegaTicketPorId")", { id: id });

	                },

	                buttons: {

	                    "Fechar": function () {

	                        $(this).dialog("close");

	                    }

	                }

	            });

	        });

	            $(function () {

	                var id = 0;

	                $(document).on('click', '.btnEditE', function () {

	                    id = $(this).attr("data-value");

	                    alert("e:"+id);

	                    $('#dialogE').dialog('open');

	                });

	                $('#dialogE').dialog({

	                    autoOpen: false,

	                    width: 400,

	                    resizable: false,

	                    title: 'Encerrar Ticket',

	                    modal: true,

	                    open: function (event, ui) {

	                        $(this).load("@Url.Action("EncerrarPorId")", { id: id });

	                },

	                buttons: {

	                    "Fechar": function () {

	                        $(this).dialog("close");

	                    }

	                }

	            });

	        });

	    </script>