90% there

app/helpers/sites_helper.rb

@@ -3,6 +3,7 @@
 module SitesHelper
   def options_for_sites_neighbourhoods
     # Remove the primary neighbourhood from the list
-    @all_neighbourhoods.filter { |e| e.name != '' }.collect { |e| [e.shortname, e.id] }
+    @all_neighbourhoods.filter { |e| e.name != '' && e.id != @primary_neighbourhood_id }
+                       .collect { |e| [e.contextual_name, e.id] }
   end
 end

app/javascript/packs/admin.js

@@ -1,4 +1,4 @@
-require("cocoon")
+require("@nathanvda/cocoon")
 require("select2")
 require("datatables.net-bs4")
 

app/models/neighbourhood.rb

@@ -23,6 +23,11 @@ def shortname
     end
   end
 
+  def contextual_name
+    # "Wardname (Region)"
+    "#{shortname} (#{unit.titleize})"
+  end
+
   def fullname
     if name.present?
       name 

app/views/admin/sites/_form.html.erb

@@ -61,18 +61,12 @@
 
   <h2>Other neighbourhoods to include</h2>
 
-  <div class="site__neighbourhoods">
-    <%# = f.association :neighbourhoods,
-                      label: tooltip_label('Secondary Neighbourhoods',
-                                           'Set the neighbourhoods that will be listed on the site'),
-                      collection: options_for_sites_neighbourhoods,
-                      input_html: {class: 'form-control select2' } %>
-
+  <div class="sites_neighbourhoods">
     <%= f.simple_fields_for :sites_neighbourhoods do |neighbourhood| %>
       <%= render 'sites_neighbourhood_fields', :f => neighbourhood %>
     <% end %>
     <div class="links">
-      <% link_to_add_association 'Add secondary neighbourhood', f, :sites_neighbourhoods %>
+      <%= link_to_add_association 'Add secondary', f, :sites_neighbourhoods, class: "btn btn-primary" %>
     </div>
   </div>
 

app/views/admin/sites/_sites_neighbourhood_fields.html.erb

@@ -1,5 +1,5 @@
 <div class="nested-fields">
-    <%= f.input :name %>
+    <%= f.input :name, collection: options_for_sites_neighbourhoods, include_blank: false %>
     <%= f.hidden_field :relation_type, value: 'Secondary' %>
-    <%= link_to_remove_association 'Remove', f %>
+    <%= link_to_remove_association 'Remove Secondary Neighbourhood', f, class: "btn btn-danger" %>
 </div>

package.json

@@ -7,6 +7,7 @@
     "yarn": ">= 1.21.1"
   },
   "dependencies": {
+    "@nathanvda/cocoon": "^1.2.14",
     "@rails/ujs": "^6.0.2",
     "@rails/webpacker": "5.4.3",
     "axios": "^0.24.0",

yarn.lock

@@ -910,6 +910,13 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
   integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
 
+"@nathanvda/cocoon@^1.2.14":
+  version "1.2.14"
+  resolved "https://registry.yarnpkg.com/@nathanvda/cocoon/-/cocoon-1.2.14.tgz#aaea910e4b9c0d28d5bdcb7f3743617db46b09af"
+  integrity sha512-WcEt2vVp50de2i7rkD4O+96O1iMtMIcTBNGPocrHfcmHDujKOngoLHFF8Ektgoh8PjwFAJMxx8WyGv0BtKTjxQ==
+  dependencies:
+    jquery "^3.3.1"
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -4033,7 +4040,7 @@ jest-worker@^26.5.0:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jquery@>=1.7, jquery@^3.4.1:
+jquery@>=1.7, jquery@^3.3.1, jquery@^3.4.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
   integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==