Fix duplicate message after dismissing suggestions

If we create one category_meta_message for each category, removing when
not relevant, then duplicat suggestion showing leads to duplicate
messages because the layer is still relevant, just not visible, and so
the old layer message is not removed. Instead, repurpose the ID of any
existing category_meta_message, so there is only ever one in existence.

2 files changed, 7 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e77fcfa42..e25f0db0a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@
         - Include file extensions in Dropzone accepted photo config.
         - Fix photo orientation in modern browsers.
         - Improve compatibility with G Suite OpenID Connect authentication. #3032
+        - Fix duplicate asset message after dismissing duplicate suggestions.
     - Admin improvements:
         - Display user name/email for contributed as reports. #2990
         - Interface for enabling anonymous reports for certain categories. #2989
diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js
index ffa342e5f..56055ec52 100644
--- a/web/cobrands/fixmystreet/assets.js
+++ b/web/cobrands/fixmystreet/assets.js
@@ -419,10 +419,10 @@ function check_zoom_message_visibility() {
             category = $("select#" + select).val() || '',
             prefix = category.replace(/[^a-z]/gi, ''),
             id = "category_meta_message_" + prefix,
-            $p = $('#' + id),
+            $p = $('.category_meta_message'),
             message;
         if ($p.length === 0) {
-            $p = $("<p>").prop("id", id).prop('class', 'category_meta_message');
+            $p = $("<p>").prop('class', 'category_meta_message');
             if ($('html').hasClass('mobile')) {
                 $p.click(function() {
                     $("#mob_ok").trigger('click');
@@ -430,6 +430,7 @@ function check_zoom_message_visibility() {
             }
             $p.prependTo('#js-post-category-messages');
         }
+        $p.prop('id', id);
 
         if (this.getVisibility() && this.inRange) {
             message = get_asset_pick_message.call(this);
@@ -453,6 +454,9 @@ function get_asset_pick_message() {
     return message;
 }
 
+/* This doesn't just use the class because e.g. an unselect event
+ * can fire after a category change event, and that would then
+ * update the new message using the text of the unselected layer. */
 function update_message_display(message) {
     if (this.fixmystreet.asset_group) {
         _update_message(message, this.fixmystreet.asset_group);