I am using ruby 3.1.0 and rails 7.0.3 and following this followed this instruction for setup

create a user and friend model and add a relation between them

app/models/user.rb

has_many :friends, dependent: :destroy
accepts_nested_attributes_for :friends

app/models/friend.rb

belongs_to :user

app/controllers/users_controller.rb

  def new
    @user = User.new
    @friends = @user.friends.build
  end
  
  def create
    @user = User.new(user_params)
    if @user.save
      redirect_to user_path(@user)
    else
      render action: :new
    end
  end
  
  def show
    @user = User.find(params[:id])
    @friends = @user.friends
  end
  
  private
  
  def user_params
    params.require(:user).permit(:name, friends_attributes: [:id, :friend_name, :_destroy])
  end

app/views/new.html.erb

<%= form_for(@user) do |f| %>
   <div>
<div>
  <%= f.label :name %>
  <%= f.text_field :name %>
</div>

<div>
  <%= f.fields_for :friends do |t| %>
    <%= render "friend_fields", :f => t %>
  <% end %>
  
  <div>
    <br>
    <%= link_to_add_association "Add Friend", f, :friends %>
  </div>
</div>

<div>
  <br>
  <%= f.submit %>
</div>

app/views/_friend_fileds_html.erb

<div class="nested-fields">
  <%= f.label "Friend's name" %>
  <%= f.text_field :friend_name %>

  <%= link_to_remove_association "Delete", f %>
</div>

app/javascript/packs/application.js

 require('jquery')
 import "cocoon";

app/config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
   $: 'jquery/src/jquery',
   jQuery: 'jquery/src/jquery'
})
)

 module.exports = environment

this is all about which I have made changes