我有一个表显示了我使用Enums

实现的状态
我甚至可以将状态更改为任意

所以问题是每当我改变状态时，它就会刷新页面，然后标签就会改变。
那么，我如何才能把现场行动徽章，所以每当我改变状态（使用枚举实现），它不需要刷新页面？？
如果我在两台不同的笔记本电脑中打开此表，并且如果我在一台笔记本电脑中更改状态，它应该也会自动更新另一台笔记本电脑中的标签，而无需刷新页面，我如何将此实时操作功能实现到标签？
这是我的代码
orders_controller.rb

class OrdersController < ApplicationController
    before_action :set_order, only: %i[show file_error success cancelled processing pending]
    before_action :authenticate_user!
    include ActiveStorage::SendZip

    def file_error
        authorize @order
        @order.file_error!
        redirect_back(fallback_location: root_path)
        flash[:alert] = "The Order is having a file error for #{@order.user.name } #OrderID: #{@order.id.to_s}"
        

    end

    def success
        authorize @order
        @order.success!
        redirect_back(fallback_location: root_path)
        flash[:alert] = "The Order is success for #{@order.user.name } #OrderID: #{@order.id.to_s}"

    end

    def cancelled
        authorize @order
        @order.cancelled!
        redirect_back(fallback_location: root_path)
        flash[:alert] = "The Order is cancelled for #{@order.user.name } #OrderID: #{@order.id.to_s}"
    end

    def processing
        authorize @order
        @order.processing!
        redirect_back(fallback_location: root_path)
        flash[:alert] = "The Order is processing for #{@order.user.name } #OrderID: #{@order.id.to_s}"
    end

    def pending
        authorize @order
        @order.pending!
        redirect_back(fallback_location: root_path)
        flash[:alert] = "The Order is pending for #{@order.user.name } #OrderID: #{@order.id.to_s}"
    end
        

    def universals
        @orders = Order.all.order(created_at: :desc).page(params[:page]).per(5)
        authorize @orders
    end

    def download_files
        @order = Order.find(params[:id])
        authorize @order
        send_zip @order.files, filename: "#{@order.user.name + @order.id.to_s}.zip"
        @order.processing!
        flash[:alert] = "The Order is processing for #{@order.user.name } #OrderID: #{@order.id.to_s}"
    end

views/shared/_table_details.html.erb

<td class="px-6 py-4 text-gray-600">
    <div class="flex flex-row items-center">
        <span class="p-1 rounded-md <%= badges(order.status) %>"><%= order.status %></span>
        <div class="relative" data-controller="dropdown">
            
            <button type="button"
                    id="dropdown_example"
                    class="inline-flex justify-center items-center"
                    data-dropdown-target="button"
                    data-action="click->dropdown#toggle keydown.esc->dropdown#toggle click@window->dropdown#hide"
                    tabindex="0"
                    aria-haspopup="true" aria-expanded="true">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block text-gray-500 hover:text-slate-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                </svg>
            </button>

        
            <div role="menu"
                class="absolute right-0 origin-top-right w-48 shadow-xl rounded z-1 hidden"
                data-dropdown-target="menu"
                data-transition-enter="transition ease-out duration-100"
                data-transition-enter-start="transform opacity-0 scale-95"
                data-transition-enter-end="transform opacity-100 scale-100"
                data-transition-leave="transition ease-in duration-75"
                data-transition-leave-start="transform opacity-100 scale-100"
                data-transition-leave-end="transform opacity-0 scale-95"
                aria-orientation="vertical" aria-labelledby="dropdown_example">
                <div class="bg-white rounded-md">
                <div class="p-1 space-y-1">
                    <%= link_to success_order_path(order), class:"flex items-center space-x-2 rounded py-2 px-3 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:bg-slate-100 focus:text-slate-700" do %>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                    </svg>

                    <span>Success</span>

                    <% end %>

                    <%= link_to cancelled_order_path(order), class:"flex items-center space-x-2 rounded py-2 px-3 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:bg-slate-100 focus:text-slate-700" do %>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>

                    <span>Cancel</span>

                    <% end %>

                    <%= link_to file_error_order_path(order), class:"flex items-center space-x-2 rounded py-2 px-3 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:bg-slate-100 focus:text-slate-700" do %>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                    </svg>

                    <span>File Error</span>

                    <% end %>

                    <%= link_to processing_order_path(order), class:"flex items-center space-x-2 rounded py-2 px-3 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:bg-slate-100 focus:text-slate-700" do %>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
                    </svg>

                    <span>Processing</span>

                    <% end %>

                    <%= link_to pending_order_path(order), class:"flex items-center space-x-2 rounded py-2 px-3 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-700 focus:outline-none focus:bg-slate-100 focus:text-slate-700" do %>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                    </svg>

                    <span>Pending</span>

                    <% end %>
                    
                </div>
                </div>
            </div>
            </div>
    </div>
</td>