Как вызвать код JS один раз, когда в рельсах создается новая модель?

Question

Я пытаюсь воспроизвести анимацию «Достижение разблокировано» JS на моей странице шоу, когда кто-то создает новую модель коктейля. Таким образом, он должен играть только один раз и никогда больше на этой конкретной странице. Я как бы застрял на том, как это сделать, не создавая отдельную таблицу для «Достижений» в моей БД. У кого-нибудь есть простое решение? Вот мой контроллер (NUM, @num и @ num2 - это переменные, которые я создал, чтобы найти решение, не стесняйтесь игнорировать):

class CocktailsController < ApplicationController
  NUM = Cocktail.count
  def index
    @cocktails = Cocktail.all
  end

  def show
    @cocktail = Cocktail.find(params[:id])
    # @dose = Dose.new
    @num = NUM
  end

  def new
    @cocktail = Cocktail.new
  end

  def create
    @cocktail = Cocktail.new(cocktail_params)
    @num = NUM
    if @cocktail.photo.attached?
      @num2 = @num + 2
      @cocktail.save
      redirect_to cocktail_path(@cocktail)
    else
      redirect_to new_cocktail_path,
                  warning: "Sorry, you can't create a cocktail without
                  uploading an image"
    end
  end

  def edit
    @cocktail = Cocktail.find(params[:id])
  end

  def update
    @cocktail = Cocktail.find(params[:id])
    @cocktail.update(cocktail_params)
    redirect_to root_path
  end

  def destroy
    @cocktail = Cocktail.find(params[:id])
    @cocktail.destroy

    # redirect_to root_path
  end

  private

  def cocktail_params
    params.require(:cocktail).permit(:name, :photo)
  end
end

My HTML (Первый div - это анимация html. Мой текущий код позволяет воспроизводить анимацию более одного раза на всех страницах коктейльных шоу, созданных после 7-го коктейля):

<% if @num < 7 %>
  <div id="achievement" class="">
    <div class="circle"></div>
    <div class="copy">
      <h4>Achievement Unlocked!</h4>
      <p>Here are some internet points!</p>
    </div>
  </div>
<% end %>


<div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url( <% if @cocktail.photo.attached? %> <%= cl_image_path @cocktail.photo.key %> <% else %> https://raw.githubusercontent.com/lewagon/fullstack-images/master/uikit/lunch.jpg <% end %>)">
  <div class="container">
    <h1><%= @cocktail.name %></h1>
  </div>
</div>

<br>
<div class="center">
  <%= link_to "Add A New Dose", new_cocktail_dose_path(@cocktail), class: "btn btn-ghost" %>
</div>

<div class="cards">
<% @cocktail.doses.each do |dose| %>
  <div class="card" >
    <div class="card-body">
      <h5 class="card-title"><%= dose.ingredient.name %></h5>
      <p class="card-text"><%= dose.description %></p>
      <%= link_to "Delete", cocktail_dose_path(@cocktail, dose), class: "btn btn-dark", method: :delete %>
    </div>
  </div>
<% end %>
</div>


<br>
<div class="center">
  <%= link_to "Back", root_path, class: "btn btn-ghost" %>
</div>