Hello everyone, I’m new to Elixir, Phoenix, and Liveview so I’m hoping that this question isn’t too basic.

I have a Liveview that currently should show a different set of HTML based on an assign that I update on click:

    <div>
    <div style="height: 70px; background-color: #00558c;">
            <div style="width: 95%; margin: auto; display: flex; flex-direction: row; justify-content: space-between">
            <div style="color: white; font-size: 30px; font-family: Arial; margin-top: 18px; font-weight: bold;">HL7 Visualizer</div>
            <label class="switch"><input type="checkbox" id="togBtn" class="<%= if @mode == :mode2 do %>checked <% end %>"><div class="slider round" phx-click="toggle"><!--ADDED HTML --><span  phx-click="message_list" class="on"><%= @mode %></span><span class="off"><%= @mode %></span><!--END--></div></label>

    </div>
</div>
    <%= if @mode == :mode1 do %>
        <div style="margin-top: 30px">
            <%= for msg <- @raw_msg do %>
                <div style="margin-bottom: 10px; max-width: 95%; margin-left: auto; margin-right: auto; overflow-wrap: break-word; overflow-y: hidden;"><%= msg %></div>
            <% end %>
        </div>
    <% else %>
        <div class="font-mono bg-white rounded-lg shadow-xl w-full px-6 py-3">
            <%= for {seg, idx} <- Enum.with_index(@msg_list) do %>
            <div class="block border border-gray-250 rounded-sm px-4 py-2 whitespace-no-wrap"><%= Enum.at(seg, 0) %></div>
            <div id="seg"  phx-click="show-detail" style="margin-right: 0px !important" class="ml-5 mt-1 mr-0 flex flex-wrap"><%= for {field, idx} <- Enum.with_index(seg) do %>
                <%= if field == "" do %>
                    <span class="block border border-gray-250 rounded-sm px-1 py-2 whitespace-no-wrap "><%= field %></span>
                <%= else %>
                    <span class="block border border-gray-250 rounded-sm px-4 py-2 whitespace-no-wrap  max-w-md overflow-hidden" style="text-overflow: ellipsis;"> <%= field %></span>
                <%= end %>
            <% end %></div>
            <% end %>
        </div>

        <%= if @show_detail == :true do %>
            <div class="ml-5 mt-3 flex-col flex flex-wrap" style="max-height: 300px"><%= for comp <- @msg_seg do %>
                <div class="flex w-200"><%= comp %></div>
                <% end %></div>
                <!--<%= render("detail.html", assigns) %>-->
        <% end %>
    <% end %>

When I load the liveview, the first set of HTML is rendered correctly and when I press the button that updates the @mode assign, it renders the new HTML correctly as well. My issue is that when I try to press the button again to set the mode back to :mode1 and render the first set of HTML again, the liveview actually renders both sets of HTML on top of each other in a weird way. I can’t seem to figure out what the issue is here. Also, I would appreciate it if any experts could illuminate a better way to achieve this if there is one

Edit: Here’s the Liveview code as well

defmodule MyAppWeb.VisualizerView do
  use Phoenix.LiveView

  def render(assigns) do
    MyAppWeb.PageView.render("visualizer.html", assigns)
  end

  def mount(_session, socket) do
    raw_msg = raw_message()
    msg_list = message_list()
    msg_seg = message_seg(0)
    {:ok, assign(socket, mode: :mode1, raw_msg: raw_msg, msg_list: msg_list, msg_seg: msg_seg, show_detail: :false)}
  end

  def handle_event("toggle", _, socket) do
    {:noreply, update(socket, :mode, fn
      :mode1 -> :mode2
      :mode2 -> :mode1
    end )}
  end

  def handle_event("show-detail", _, socket) do
    {:noreply, update(socket, :show_detail, fn
      :false -> :true
      :true -> :false
    end )}
  end
end