From e18d0a771be1860dcc5107285a0368b4edf30546 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 13 Nov 2020 18:46:42 +0000
Subject: [PATCH 01/22] Added delete button to Yesod.Form.Multi

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 93 ++++++++++++++++++-----
 1 file changed, 76 insertions(+), 17 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 80079947..e6c3e4af 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -44,6 +44,7 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 -- @since 1.6.0
 data MultiSettings site = MultiSettings
     { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
+    , msDelClass :: Text -- ^ Class to be applied to the "delete" button.
     , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
     }
 
@@ -52,13 +53,14 @@ data MultiView site = MultiView
     { mvCounter :: FieldView site -- ^ Hidden counter field.
     , mvFields :: [FieldView site] -- ^ Input fields.
     , mvAddBtn :: FieldView site -- ^ Button to add another field.
+    , mvWrapperClass :: Text -- ^ Class applied to a div wrapping each field with it's delete button.
     }
 
 -- | 'MultiSettings' for Bootstrap 3.
 --
 -- @since 1.6.0
 bs3Settings :: MultiSettings site
-bs3Settings = MultiSettings "btn btn-default" (Just errW)
+bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" (Just errW)
     where
         errW err = 
             [whamlet|
@@ -69,7 +71,7 @@ bs3Settings = MultiSettings "btn btn-default" (Just errW)
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-basic" (Just errW)
+bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" (Just errW)
     where
         errW err =
             [whamlet|
@@ -130,11 +132,10 @@ mmulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage)
     -> Int
     -> MultiSettings site
     -> MForm m (FormResult [a], MultiView site)
-mmulti field fs@FieldSettings {..} defs minVals ms = do
-    fieldClass <- newFormIdent
-    let fs' = fs {fsAttrs = addClass fieldClass fsAttrs}
-        minVals' = if minVals < 0 then 0 else minVals
-    mhelperMulti field fs' fieldClass defs minVals' ms
+mmulti field fs defs minVals' ms = do
+    wrapperClass <- newFormIdent
+    let minVals = if minVals' < 0 then 0 else minVals'
+    mhelperMulti field fs wrapperClass defs minVals ms
 
 -- Helper function, does most of the work for mmulti.
 mhelperMulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage)
@@ -145,14 +146,15 @@ mhelperMulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMe
     -> Int
     -> MultiSettings site
     -> MForm m (FormResult [a], MultiView site)
-mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals MultiSettings {..} = do
+mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals MultiSettings {..} = do
     mp <- askParams
     (_, site, langs) <- ask
     name <- maybe newFormIdent return fsName
     theId <- maybe newFormIdent return fsId
     cName <- newFormIdent
     cid <- newFormIdent
-    addBtnId <- newFormIdent 
+    addBtnId <- newFormIdent
+    delBtnPrefix <- newFormIdent
 
     let mr2 = renderMessage site langs
         cDef = length defs
@@ -174,7 +176,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals Mult
         Just p -> mkRes intField cfs p mfs cName onMissingFail FormSuccess
 
     -- generate counter view
-    cView <- mkView intField cfs cr cid cName True
+    cView <- mkView intField cfs cr Nothing cid cName True
 
     let counter = case cRes of
             FormSuccess c -> c
@@ -188,10 +190,40 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals Mult
                 else [(FormMissing, Right d) | d <- defs]
         Just p -> mapM (\n -> mkRes field fs p mfs n onMissingSucc (FormSuccess . Just)) (map fst $ mkNames counter)
 
+    -- delete button
+
+    -- The delFunction is included down with the add button rather than with
+    -- each delete button to ensure that the function only gets included once.
+    let delFunction = toWidget
+            [julius|
+                function deleteField(field) {
+                    var numFields = $("." + #{wrapperClass}).length;
+
+                    if (numFields == 1)
+                        field.val("");
+                    else
+                        field.parent().remove();
+                }
+            |]
+
+        mkDelBtn fieldId = do
+            let delBtnId = delBtnPrefix <> fieldId
+            [whamlet|
+                <button ##{delBtnId} .#{msDelClass} style="margin-bottom: 1rem; margin-left: 1rem" type="button">Delete
+            |]
+            toWidget
+                [julius|
+                    $("#" + #{delBtnId}).click(function() {
+                        var field = $("#" + #{fieldId});
+                        deleteField(field);
+                    });                    
+                |]
+
     -- generate field views
     (rs, fvs) <- do
         let mkView' ((n,i), r@(res, _)) = do
-                fv <- mkView field fs r i n False
+                let del = Just (mkDelBtn i, wrapperClass)
+                fv <- mkView field fs r del i n False
                 return (res, fv)
             xs = zip (mkNames counter) results
             notSuccNothing (_, (r,_)) = not $ isSuccNothing r
@@ -214,10 +246,19 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals Mult
                 fRes -> (fRes, False)
     
         -- create add button
+        -- also includes some styling / functions that we only want to include once
         btnWidget = do
             [whamlet|
                 <button ##{addBtnId} .#{msAddClass} type="button">Add Another
             |]
+            toWidget
+                [lucius|
+                    .#{wrapperClass} {
+                        display: flex;
+                        flex-direction: row;
+                    }
+                |]
+            delFunction -- function used by delete buttons, included here so that it only gets included once
             toWidget
                 [julius|
                     var extraFields = 0;
@@ -227,10 +268,17 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals Mult
                         $("#" + #{cid}).val(newNumber);
                         var newName = #{name} + "-" + newNumber;
                         var newId = #{theId} + "-" + newNumber;
+                        var newDelId = #{delBtnPrefix} + newId;
                         
-                        var newElem = $("." + #{fieldClass}).first().clone();
-                        newElem.val("").attr('name', newName).attr('id', newId);
-                        newElem.insertBefore("#" + #{addBtnId})
+                        var newWrapper = $("." + #{wrapperClass}).first().clone();
+                        var newField = newWrapper.children("[id^=" + #{theId} + "]"); 
+                        newField.val("").attr('name', newName).attr('id', newId);
+
+                        var newDelBtn = newWrapper.children("[id^=" + #{delBtnPrefix} + "]");
+                        newDelBtn.attr('id', newDelId);
+                        newDelBtn.click(() => deleteField(newField));                      
+
+                        newWrapper.insertBefore("#" + #{addBtnId});
                     });
                 |]
 
@@ -243,7 +291,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} fieldClass defs minVals Mult
             , fvRequired = False
             }
 
-    return (res, MultiView cView fvs btnView)
+    return (res, MultiView cView fvs btnView wrapperClass)
 
 -- Search for the given field's name in the environment,
 -- parse any values found and construct a FormResult.
@@ -274,18 +322,29 @@ mkView :: (site ~ HandlerSite m, MonadHandler m)
     => Field m a
     -> FieldSettings site
     -> (FormResult b, Either Text a)
+    -> Maybe (WidgetFor site (), Text) -- ^ Delete button widget and class for div wrapping each field with it's delete button.
     -> Text
     -> Text
     -> Bool
     -> MForm m (FieldView site)
-mkView Field {..} FieldSettings {..} (res, val) theId name isReq = do
+mkView Field {..} FieldSettings {..} (res, val) mdel theId name isReq = do
     (_, site, langs) <- ask
     let mr2 = renderMessage site langs
+        fv' = fieldView theId name fsAttrs val isReq
+        fv = do
+            [whamlet|
+                $maybe (delBtn, wrapperClass) <- mdel
+                    <div .#{wrapperClass}>
+                        ^{fv'}
+                        ^{delBtn}
+                $nothing
+                    ^{fv'}
+            |]
     return $ FieldView
         { fvLabel = toHtml $ mr2 fsLabel
         , fvTooltip = fmap toHtml $ fmap mr2 fsTooltip
         , fvId = theId
-        , fvInput = fieldView theId name fsAttrs val isReq
+        , fvInput = fv
         , fvErrors =
             case res of
                 FormFailure [e] -> Just $ toHtml e

From 39ed1f6453e7f0d870119d3cae7925573dadf972 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 13 Nov 2020 20:18:50 +0000
Subject: [PATCH 02/22] Added support for customising button contents

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 46 +++++++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index e6c3e4af..90767857 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -17,7 +17,9 @@ module Yesod.Form.MultiInput
     , mmulti
     , amulti
     , bs3Settings
+    , bs3FASettings
     , bs4Settings
+    , bs4FASettings
     ) where
 
 import Control.Arrow (second)
@@ -45,6 +47,8 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 data MultiSettings site = MultiSettings
     { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
     , msDelClass :: Text -- ^ Class to be applied to the "delete" button.
+    , msAddInner :: Maybe Html -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
+    , msDelInner :: Maybe Html -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
     , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
     }
 
@@ -60,7 +64,7 @@ data MultiView site = MultiView
 --
 -- @since 1.6.0
 bs3Settings :: MultiSettings site
-bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" (Just errW)
+bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" Nothing Nothing (Just errW)
     where
         errW err = 
             [whamlet|
@@ -71,13 +75,39 @@ bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" (Just errW)
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" (Just errW)
+bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" Nothing Nothing (Just errW)
     where
         errW err =
             [whamlet|
                 <div .invalid-feedback>#{err}
             |]
 
+-- | 'MultiSettings' for Bootstrap 3 with Font Awesome 5 Icons.
+--
+-- @since 1.6.0
+bs3FASettings :: MultiSettings site
+bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" addIcon delIcon (Just errW)
+    where
+        addIcon = Just [shamlet|<i class="fas fa-plus">|]
+        delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
+        errW err = 
+            [whamlet|
+                <span .help-block .error-block>#{err}
+            |]
+
+-- | 'MultiSettings' for Bootstrap 4 with Font Awesome 5 Icons.
+--
+-- @since 1.6.0
+bs4FASettings :: MultiSettings site
+bs4FASettings = MultiSettings "btn btn-basic" "btn btn-danger" addIcon delIcon (Just errW)
+    where
+        addIcon = Just [shamlet|<i class="fas fa-plus">|]
+        delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
+        errW err =
+            [whamlet|
+                <div .invalid-feedback>#{err}
+            |]
+
 -- | Applicative equivalent of 'mmulti'.
 --
 -- @since 1.6.0
@@ -209,7 +239,11 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
         mkDelBtn fieldId = do
             let delBtnId = delBtnPrefix <> fieldId
             [whamlet|
-                <button ##{delBtnId} .#{msDelClass} style="margin-bottom: 1rem; margin-left: 1rem" type="button">Delete
+                <button ##{delBtnId} .#{msDelClass} style="margin-bottom: 1rem; margin-left: 1rem" type="button">
+                    $maybe inner <- msDelInner
+                        #{inner}
+                    $nothing
+                        Delete
             |]
             toWidget
                 [julius|
@@ -249,7 +283,11 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
         -- also includes some styling / functions that we only want to include once
         btnWidget = do
             [whamlet|
-                <button ##{addBtnId} .#{msAddClass} type="button">Add Another
+                <button ##{addBtnId} .#{msAddClass} type="button">
+                    $maybe inner <- msAddInner
+                        #{inner}
+                    $nothing
+                        Add Another
             |]
             toWidget
                 [lucius|

From a3319f766acfd67871ed23405389913b24eab06e Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 13 Nov 2020 22:25:44 +0000
Subject: [PATCH 03/22] Error messages are now deleted with fields and are
 highlighted correctly

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 64 +++++++++++++----------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 90767857..20b3ac87 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -26,7 +26,7 @@ import Control.Arrow (second)
 import Control.Monad (liftM)
 import Control.Monad.Trans.RWS (ask, tell)
 import qualified Data.Map as Map
-import Data.Maybe (fromJust, listToMaybe, fromMaybe)
+import Data.Maybe (fromJust, listToMaybe, fromMaybe, isJust)
 import Data.Text (Text)
 import qualified Data.Text as T
 import Yesod.Core
@@ -47,6 +47,7 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 data MultiSettings site = MultiSettings
     { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
     , msDelClass :: Text -- ^ Class to be applied to the "delete" button.
+    , msWrapperErrClass :: Text -- ^ Class to be applied to the wrapper if it's field has an error.
     , msAddInner :: Maybe Html -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
     , msDelInner :: Maybe Html -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
     , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
@@ -64,18 +65,18 @@ data MultiView site = MultiView
 --
 -- @since 1.6.0
 bs3Settings :: MultiSettings site
-bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" Nothing Nothing (Just errW)
+bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
     where
         errW err = 
             [whamlet|
-                <span .help-block .error-block>#{err}
+                <span .help-block>#{err}
             |]
 
 -- | 'MultiSettings' for Bootstrap 4.
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" Nothing Nothing (Just errW)
+bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
     where
         errW err =
             [whamlet|
@@ -86,20 +87,20 @@ bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" Nothing Nothing (Ju
 --
 -- @since 1.6.0
 bs3FASettings :: MultiSettings site
-bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" addIcon delIcon (Just errW)
+bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
         errW err = 
             [whamlet|
-                <span .help-block .error-block>#{err}
+                <span .help-block>#{err}
             |]
 
 -- | 'MultiSettings' for Bootstrap 4 with Font Awesome 5 Icons.
 --
 -- @since 1.6.0
 bs4FASettings :: MultiSettings site
-bs4FASettings = MultiSettings "btn btn-basic" "btn btn-danger" addIcon delIcon (Just errW)
+bs4FASettings = MultiSettings "btn btn-basic" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -131,10 +132,6 @@ amulti field fs defs minVals ms = formToAForm $
                         $forall fv <- mvFields
                             ^{fvInput fv}
 
-                            $maybe err <- fvErrors fv
-                                $maybe errW <- msErrWidget ms
-                                    ^{errW err}
-
                         ^{fvInput mvAddBtn}
                     |]
                 (fv : _) = mvFields
@@ -206,7 +203,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
         Just p -> mkRes intField cfs p mfs cName onMissingFail FormSuccess
 
     -- generate counter view
-    cView <- mkView intField cfs cr Nothing cid cName True
+    cView <- mkView intField cfs cr Nothing Nothing msWrapperErrClass cid cName True
 
     let counter = case cRes of
             FormSuccess c -> c
@@ -232,14 +229,14 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                     if (numFields == 1)
                         field.val("");
                     else
-                        field.parent().remove();
+                        field.parent().parent().remove();
                 }
             |]
 
         mkDelBtn fieldId = do
             let delBtnId = delBtnPrefix <> fieldId
             [whamlet|
-                <button ##{delBtnId} .#{msDelClass} style="margin-bottom: 1rem; margin-left: 1rem" type="button">
+                <button ##{delBtnId} .#{msDelClass} style="margin-left: 1rem" type="button">
                     $maybe inner <- msDelInner
                         #{inner}
                     $nothing
@@ -257,7 +254,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     (rs, fvs) <- do
         let mkView' ((n,i), r@(res, _)) = do
                 let del = Just (mkDelBtn i, wrapperClass)
-                fv <- mkView field fs r del i n False
+                fv <- mkView field fs r del msErrWidget msWrapperErrClass i n False
                 return (res, fv)
             xs = zip (mkNames counter) results
             notSuccNothing (_, (r,_)) = not $ isSuccNothing r
@@ -292,6 +289,9 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             toWidget
                 [lucius|
                     .#{wrapperClass} {
+                        margin-bottom: 1rem;
+                    }
+                    .#{wrapperClass}-inner {
                         display: flex;
                         flex-direction: row;
                     }
@@ -309,12 +309,14 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         var newDelId = #{delBtnPrefix} + newId;
                         
                         var newWrapper = $("." + #{wrapperClass}).first().clone();
-                        var newField = newWrapper.children("[id^=" + #{theId} + "]"); 
+                        newWrapper.children( ":not(." + #{wrapperClass} + "-inner)" ).remove(); // remove error messages
+
+                        var newField = newWrapper.find("[id^=" + #{theId} + "]"); 
                         newField.val("").attr('name', newName).attr('id', newId);
 
-                        var newDelBtn = newWrapper.children("[id^=" + #{delBtnPrefix} + "]");
+                        var newDelBtn = newWrapper.find("[id^=" + #{delBtnPrefix} + "]");
                         newDelBtn.attr('id', newDelId);
-                        newDelBtn.click(() => deleteField(newField));                      
+                        newDelBtn.click(() => deleteField(newField));
 
                         newWrapper.insertBefore("#" + #{addBtnId});
                     });
@@ -360,21 +362,32 @@ mkView :: (site ~ HandlerSite m, MonadHandler m)
     => Field m a
     -> FieldSettings site
     -> (FormResult b, Either Text a)
-    -> Maybe (WidgetFor site (), Text) -- ^ Delete button widget and class for div wrapping each field with it's delete button.
+    -> Maybe (WidgetFor site (), Text) -- Delete button widget and class for div wrapping each field with it's delete button.
+    -> Maybe (Html -> WidgetFor site ()) -- Function to display error messages.
+    -> Text
     -> Text
     -> Text
     -> Bool
     -> MForm m (FieldView site)
-mkView Field {..} FieldSettings {..} (res, val) mdel theId name isReq = do
+mkView Field {..} FieldSettings {..} (res, val) mdel merrW errClass theId name isReq = do
     (_, site, langs) <- ask
     let mr2 = renderMessage site langs
+        merr = case res of
+                FormFailure [e] -> Just $ toHtml e
+                _ -> Nothing
         fv' = fieldView theId name fsAttrs val isReq
         fv = do
             [whamlet|
                 $maybe (delBtn, wrapperClass) <- mdel
-                    <div .#{wrapperClass}>
-                        ^{fv'}
-                        ^{delBtn}
+                    <div .#{wrapperClass} :isJust merr:.#{errClass}>
+                        <div .#{wrapperClass}-inner>
+                            ^{fv'}
+                            ^{delBtn}
+                            
+                        $maybe err <- merr
+                            $maybe errW <- merrW
+                                ^{errW err}
+                        
                 $nothing
                     ^{fv'}
             |]
@@ -383,9 +396,6 @@ mkView Field {..} FieldSettings {..} (res, val) mdel theId name isReq = do
         , fvTooltip = fmap toHtml $ fmap mr2 fsTooltip
         , fvId = theId
         , fvInput = fv
-        , fvErrors =
-            case res of
-                FormFailure [e] -> Just $ toHtml e
-                _ -> Nothing
+        , fvErrors = merr
         , fvRequired = isReq
         }
\ No newline at end of file

From 2c1112c52c77e10c487d3f9c90a1cd2a0f596c7b Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 13 Nov 2020 22:48:56 +0000
Subject: [PATCH 04/22] Fixed bootstrap styling

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 20b3ac87..f2b9b5ba 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -76,7 +76,7 @@ bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" Nothi
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-basic" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
+bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
     where
         errW err =
             [whamlet|
@@ -100,7 +100,7 @@ bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" add
 --
 -- @since 1.6.0
 bs4FASettings :: MultiSettings site
-bs4FASettings = MultiSettings "btn btn-basic" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
+bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -236,7 +236,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
         mkDelBtn fieldId = do
             let delBtnId = delBtnPrefix <> fieldId
             [whamlet|
-                <button ##{delBtnId} .#{msDelClass} style="margin-left: 1rem" type="button">
+                <button ##{delBtnId} .#{msDelClass} style="margin-left: 0.75rem" type="button">
                     $maybe inner <- msDelInner
                         #{inner}
                     $nothing

From df0c61e364f3507f28fa437e06140a9538ef6b03 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 13 Nov 2020 23:03:14 +0000
Subject: [PATCH 05/22] Tooltip now shows in applicative multi-fields

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index f2b9b5ba..412c6925 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -47,6 +47,7 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 data MultiSettings site = MultiSettings
     { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
     , msDelClass :: Text -- ^ Class to be applied to the "delete" button.
+    , msTooltipClass :: Text -- ^ Only used in applicative forms. Class to be applied to the tooltip.
     , msWrapperErrClass :: Text -- ^ Class to be applied to the wrapper if it's field has an error.
     , msAddInner :: Maybe Html -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
     , msDelInner :: Maybe Html -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
@@ -65,7 +66,7 @@ data MultiView site = MultiView
 --
 -- @since 1.6.0
 bs3Settings :: MultiSettings site
-bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
+bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has-error" Nothing Nothing (Just errW)
     where
         errW err = 
             [whamlet|
@@ -76,7 +77,7 @@ bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" Nothi
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "has-error" Nothing Nothing (Just errW)
+bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "has-error" Nothing Nothing (Just errW)
     where
         errW err =
             [whamlet|
@@ -87,7 +88,7 @@ bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "has-error" Not
 --
 -- @since 1.6.0
 bs3FASettings :: MultiSettings site
-bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
+bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -100,7 +101,7 @@ bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "has-error" add
 --
 -- @since 1.6.0
 bs4FASettings :: MultiSettings site
-bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "has-error" addIcon delIcon (Just errW)
+bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -125,8 +126,12 @@ amulti field fs defs minVals ms = formToAForm $
         mform = do
             (fr, MultiView {..}) <- mmulti field fs defs minVals ms
 
-            let widget = do
+            let (fv : _) = mvFields
+                widget = do
                     [whamlet|
+                        $maybe tooltip <- fvTooltip fv
+                            <span .#{msTooltipClass ms}>#{tooltip}
+
                         ^{fvInput mvCounter}
 
                         $forall fv <- mvFields
@@ -134,7 +139,6 @@ amulti field fs defs minVals ms = formToAForm $
 
                         ^{fvInput mvAddBtn}
                     |]
-                (fv : _) = mvFields
                 view = FieldView
                     { fvLabel = fvLabel fv
                     , fvTooltip = Nothing

From 44f065c6154477e5d7f70e50a30967b673a55bab Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Sat, 14 Nov 2020 00:37:18 +0000
Subject: [PATCH 06/22] Updated docs

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 43 +++++++++++++++++++++--
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 412c6925..684c57ca 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -43,6 +43,11 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 #endif
 #endif
 
+-- | By default delete buttons have a @margin-left@ property of @0.75rem@.
+-- You can override this by specifying an alternative value in a class
+-- which is then passed inside 'MultiSettings'. Note that you might have
+-- to use @!important@.
+--
 -- @since 1.6.0
 data MultiSettings site = MultiSettings
     { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
@@ -54,6 +59,34 @@ data MultiSettings site = MultiSettings
     , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
     }
 
+-- | The general structure of each individually generated field is as follows.
+-- There is an external wrapper element containing both an inner wrapper and any
+-- error messages that apply to that specific field. The inner wrapper contains
+-- both the field and it's corresponding delete button.
+--
+-- The structure is illustrated by the following:
+-- @
+-- <div .#{wrapperClass}>
+--     <div .#{wrapperClass}-inner>
+--         ^{fieldWidget}
+--         ^{deleteButton}
+--     ^{maybeErrorMessages}
+-- @
+--
+-- Each wrapper element has the same class which is automatically generated. This class
+-- is returned in the 'MultiView' should you wish to change the styling. The inner wrapper
+-- uses the same class followed by @-inner@. By default the wrapper and inner wrapper has
+-- classes are as follows:
+-- @
+-- .#{wrapperClass} {
+--     margin-bottom: 1rem;
+-- }
+-- .#{wrapperClass}-inner {
+--     display: flex;
+--     flex-direction: row;
+-- }
+-- @
+--
 -- @since 1.6.0
 data MultiView site = MultiView
     { mvCounter :: FieldView site -- ^ Hidden counter field.
@@ -85,8 +118,9 @@ bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "h
             |]
 
 -- | 'MultiSettings' for Bootstrap 3 with Font Awesome 5 Icons.
+-- Uses @fa-plus@ for the add button and @fa-trash-alt@ for the delete button.
 --
--- @since 1.6.0
+-- @since 1.7.0
 bs3FASettings :: MultiSettings site
 bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
     where
@@ -98,8 +132,9 @@ bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "h
             |]
 
 -- | 'MultiSettings' for Bootstrap 4 with Font Awesome 5 Icons.
+-- Uses @fa-plus@ for the add button and @fa-trash-alt@ for the delete button.
 --
--- @since 1.6.0
+-- @since 1.7.0
 bs4FASettings :: MultiSettings site
 bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
     where
@@ -112,6 +147,10 @@ bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block"
 
 -- | Applicative equivalent of 'mmulti'.
 --
+-- Note about tooltips:
+-- Rather than displaying the tooltip alongside each field the
+-- tooltip is displayed once at the top of the multi-field set.
+--
 -- @since 1.6.0
 amulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage)
     => Field m a

From 7b327b3dcd8e3d31bdb440d3a77e2f5dfd32b619 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Sat, 14 Nov 2020 00:45:20 +0000
Subject: [PATCH 07/22] Made MultiSettings fields strict

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 684c57ca..aa31cfed 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -50,13 +50,13 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 --
 -- @since 1.6.0
 data MultiSettings site = MultiSettings
-    { msAddClass :: Text -- ^ Class to be applied to the "add another" button.
-    , msDelClass :: Text -- ^ Class to be applied to the "delete" button.
-    , msTooltipClass :: Text -- ^ Only used in applicative forms. Class to be applied to the tooltip.
-    , msWrapperErrClass :: Text -- ^ Class to be applied to the wrapper if it's field has an error.
-    , msAddInner :: Maybe Html -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
-    , msDelInner :: Maybe Html -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
-    , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
+    { msAddClass :: !Text -- ^ Class to be applied to the "add another" button.
+    , msDelClass :: !Text -- ^ Class to be applied to the "delete" button.
+    , msTooltipClass :: !Text -- ^ Only used in applicative forms. Class to be applied to the tooltip.
+    , msWrapperErrClass :: !Text -- ^ Class to be applied to the wrapper if it's field has an error.
+    , msAddInner :: !(Maybe Html) -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
+    , msDelInner :: !(Maybe Html) -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
+    , msErrWidget :: !(Maybe (Html -> WidgetFor site ())) -- ^ Only used in applicative forms. Create a widget for displaying errors.
     }
 
 -- | The general structure of each individually generated field is as follows.

From 0d0112b73bf0a8ff55e1a5b2fffdb0b9ec267df4 Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Sun, 15 Nov 2020 17:44:56 +0000
Subject: [PATCH 08/22] Updated documentation

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 34 +++++++++++------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index aa31cfed..cea29ff3 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -45,8 +45,7 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 
 -- | By default delete buttons have a @margin-left@ property of @0.75rem@.
 -- You can override this by specifying an alternative value in a class
--- which is then passed inside 'MultiSettings'. Note that you might have
--- to use @!important@.
+-- which is then passed inside 'MultiSettings'.
 --
 -- @since 1.6.0
 data MultiSettings site = MultiSettings
@@ -65,27 +64,26 @@ data MultiSettings site = MultiSettings
 -- both the field and it's corresponding delete button.
 --
 -- The structure is illustrated by the following:
--- @
--- <div .#{wrapperClass}>
---     <div .#{wrapperClass}-inner>
---         ^{fieldWidget}
---         ^{deleteButton}
---     ^{maybeErrorMessages}
--- @
+-- 
+-- > <div .#{wrapperClass}>
+-- >     <div .#{wrapperClass}-inner>
+-- >         ^{fieldWidget}
+-- >         ^{deleteButton}
+-- >     ^{maybeErrorMessages}
 --
 -- Each wrapper element has the same class which is automatically generated. This class
 -- is returned in the 'MultiView' should you wish to change the styling. The inner wrapper
 -- uses the same class followed by @-inner@. By default the wrapper and inner wrapper has
 -- classes are as follows:
--- @
--- .#{wrapperClass} {
---     margin-bottom: 1rem;
--- }
--- .#{wrapperClass}-inner {
---     display: flex;
---     flex-direction: row;
--- }
--- @
+-- 
+-- > .#{wrapperClass} {
+-- >     margin-bottom: 1rem;
+-- > }
+-- >
+-- > .#{wrapperClass}-inner {
+-- >     display: flex;
+-- >     flex-direction: row;
+-- > }
 --
 -- @since 1.6.0
 data MultiView site = MultiView

From e209810b8c2626090f55dfeb6bfba69b0ce33bbb Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Sun, 15 Nov 2020 17:45:47 +0000
Subject: [PATCH 09/22] Removed strictness from MultiSettings fields that are
 only used in applicative forms

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index cea29ff3..53446e17 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -51,11 +51,11 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 data MultiSettings site = MultiSettings
     { msAddClass :: !Text -- ^ Class to be applied to the "add another" button.
     , msDelClass :: !Text -- ^ Class to be applied to the "delete" button.
-    , msTooltipClass :: !Text -- ^ Only used in applicative forms. Class to be applied to the tooltip.
+    , msTooltipClass :: Text -- ^ Only used in applicative forms. Class to be applied to the tooltip.
     , msWrapperErrClass :: !Text -- ^ Class to be applied to the wrapper if it's field has an error.
     , msAddInner :: !(Maybe Html) -- ^ Inner Html of add button, defaults to "Add Another". Useful for adding icons inside buttons.
     , msDelInner :: !(Maybe Html) -- ^ Inner Html of delete button, defaults to "Delete". Useful for adding icons inside buttons.
-    , msErrWidget :: !(Maybe (Html -> WidgetFor site ())) -- ^ Only used in applicative forms. Create a widget for displaying errors.
+    , msErrWidget :: Maybe (Html -> WidgetFor site ()) -- ^ Only used in applicative forms. Create a widget for displaying errors.
     }
 
 -- | The general structure of each individually generated field is as follows.

From 008b4af7412c0af61d587c51d4f7ecf2dfdbb928 Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Sun, 15 Nov 2020 21:12:23 +0000
Subject: [PATCH 10/22] Reworked the field duplication code to be more robust
 and allow for fields with multiple elements like radio fields

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 87 ++++++++++++++++++-----
 1 file changed, 69 insertions(+), 18 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 53446e17..1afde113 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -229,7 +229,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
         cfs = FieldSettings "" Nothing (Just cid) (Just cName) [("hidden", "true")]
         mkName i = name `T.append` (T.pack $ '-' : show i)
         mkId i = theId `T.append` (T.pack $ '-' : show i)
-        mkNames c = [(mkName i, mkId i) | i <- [0 .. c]]
+        mkNames c = [(i, (mkName i, mkId i)) | i <- [0 .. c]]
         onMissingSucc _ _ = FormSuccess Nothing
         onMissingFail m l = FormFailure [renderMessage m l MsgValueRequired]
         isSuccNothing r = case r of
@@ -256,7 +256,9 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             if cDef == 0
                 then [(FormMissing, Left "")]
                 else [(FormMissing, Right d) | d <- defs]
-        Just p -> mapM (\n -> mkRes field fs p mfs n onMissingSucc (FormSuccess . Just)) (map fst $ mkNames counter)
+        Just p -> mapM
+            (\n -> mkRes field fs p mfs n onMissingSucc (FormSuccess . Just))
+            (map (fst . snd) $ mkNames counter)
 
     -- delete button
 
@@ -264,17 +266,33 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     -- each delete button to ensure that the function only gets included once.
     let delFunction = toWidget
             [julius|
-                function deleteField(field) {
+                function deleteField(wrapper) {
                     var numFields = $("." + #{wrapperClass}).length;
 
                     if (numFields == 1)
-                        field.val("");
+                    {
+                        wrapper.find("*").each(function() {
+                            removeVals($(this));
+                        });
+                    }
                     else
-                        field.parent().parent().remove();
+                        wrapper.remove();
+                }
+
+                // input types where we don't want to reset the value
+                const keepValueTypes = ["radio", "checkbox", "button"];
+
+                function removeVals(e) {
+                    // uncheck any checkboxes or radio fields and empty any text boxes
+                    if(e.prop('checked') == true)
+                        e.prop('checked', false);
+
+                    if(!keepValueTypes.includes(e.prop('type')))
+                        e.val("");
                 }
             |]
 
-        mkDelBtn fieldId = do
+        mkDelBtn fieldId wrapperClass = do
             let delBtnId = delBtnPrefix <> fieldId
             [whamlet|
                 <button ##{delBtnId} .#{msDelClass} style="margin-left: 0.75rem" type="button">
@@ -287,20 +305,20 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                 [julius|
                     $("#" + #{delBtnId}).click(function() {
                         var field = $("#" + #{fieldId});
-                        deleteField(field);
+                        deleteField(field.parents("." + #{wrapperClass}));
                     });                    
                 |]
 
     -- generate field views
     (rs, fvs) <- do
-        let mkView' ((n,i), r@(res, _)) = do
-                let del = Just (mkDelBtn i, wrapperClass)
+        let mkView' ((c, (n,i)), r@(res, _)) = do
+                let del = Just (mkDelBtn i wrapperClass, wrapperClass, c)
                 fv <- mkView field fs r del msErrWidget msWrapperErrClass i n False
                 return (res, fv)
             xs = zip (mkNames counter) results
             notSuccNothing (_, (r,_)) = not $ isSuccNothing r
             ys = case filter notSuccNothing xs of
-                [] -> [((mkName 0, mkId 0), (FormSuccess Nothing, Left ""))] -- always need at least one value to generate a field
+                [] -> [((0, (mkName 0, mkId 0)), (FormSuccess Nothing, Left ""))] -- always need at least one value to generate a field
                 zs -> zs
         rvs <- mapM mkView' ys
         return $ unzip rvs
@@ -349,15 +367,46 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         var newId = #{theId} + "-" + newNumber;
                         var newDelId = #{delBtnPrefix} + newId;
                         
+                        // get new wrapper and remove old error messages
                         var newWrapper = $("." + #{wrapperClass}).first().clone();
-                        newWrapper.children( ":not(." + #{wrapperClass} + "-inner)" ).remove(); // remove error messages
+                        newWrapper.children( ":not(." + #{wrapperClass} + "-inner)" ).remove();
 
-                        var newField = newWrapper.find("[id^=" + #{theId} + "]"); 
-                        newField.val("").attr('name', newName).attr('id', newId);
+                        // get counter from wrapper
+                        var oldCount = newWrapper.data("counter");
+                        var oldName = #{name} + "-" + oldCount;
+                        var oldId = #{theId} + "-" + oldCount;
+                        var oldDelBtn = #{delBtnPrefix} + oldId;
+
+                        // replace any id, name or for attributes that began with
+                        // the old values and replace them with the new values
+                        var idRegex = new RegExp("^" + oldId);
+                        var nameRegex = new RegExp("^" + oldName);
+
+                        var els = newWrapper.find("*");
+                        els.each(function() {
+                            var e = $(this);
+
+                            if(e.prop('id') != undefined)
+                                e.prop('id', e.prop('id').replace(idRegex, newId));
+
+                            if(e.prop('name') != undefined)
+                                e.prop('name', e.prop('name').replace(nameRegex, newName));
+
+                            if(e.prop('for') != undefined)
+                                e.prop('for', e.prop('for').replace(idRegex, newId)); // radio fields use id in for attribute
+
+                            removeVals(e);
+                        });
+
+                        // set new counter on wrapper
+                        newWrapper.data("counter", newNumber);
+
+                        //var newField = newWrapper.find("[id^=" + #{theId} + "]"); 
+                        //newField.val("").attr('name', newName).attr('id', newId);
 
                         var newDelBtn = newWrapper.find("[id^=" + #{delBtnPrefix} + "]");
-                        newDelBtn.attr('id', newDelId);
-                        newDelBtn.click(() => deleteField(newField));
+                        newDelBtn.prop('id', newDelId);
+                        newDelBtn.click(() => deleteField(newWrapper));
 
                         newWrapper.insertBefore("#" + #{addBtnId});
                     });
@@ -403,7 +452,9 @@ mkView :: (site ~ HandlerSite m, MonadHandler m)
     => Field m a
     -> FieldSettings site
     -> (FormResult b, Either Text a)
-    -> Maybe (WidgetFor site (), Text) -- Delete button widget and class for div wrapping each field with it's delete button.
+    -- Delete button widget, class for div wrapping each field with it's delete button and counter value for that field.
+    -- Nothing if the field passed doesn't need a delete button e.g. if it is the counter field.
+    -> Maybe (WidgetFor site (), Text, Int)
     -> Maybe (Html -> WidgetFor site ()) -- Function to display error messages.
     -> Text
     -> Text
@@ -419,8 +470,8 @@ mkView Field {..} FieldSettings {..} (res, val) mdel merrW errClass theId name i
         fv' = fieldView theId name fsAttrs val isReq
         fv = do
             [whamlet|
-                $maybe (delBtn, wrapperClass) <- mdel
-                    <div .#{wrapperClass} :isJust merr:.#{errClass}>
+                $maybe (delBtn, wrapperClass, counter) <- mdel
+                    <div .#{wrapperClass} :isJust merr:.#{errClass} data-counter=#{counter}>
                         <div .#{wrapperClass}-inner>
                             ^{fv'}
                             ^{delBtn}

From 973461e70f74bd3600ad983af241b413290f8ca1 Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Sun, 15 Nov 2020 22:19:37 +0000
Subject: [PATCH 11/22] Minor refactoring

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 1afde113..7dcc9e67 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -292,7 +292,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                 }
             |]
 
-        mkDelBtn fieldId wrapperClass = do
+        mkDelBtn fieldId = do
             let delBtnId = delBtnPrefix <> fieldId
             [whamlet|
                 <button ##{delBtnId} .#{msDelClass} style="margin-left: 0.75rem" type="button">
@@ -312,8 +312,8 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     -- generate field views
     (rs, fvs) <- do
         let mkView' ((c, (n,i)), r@(res, _)) = do
-                let del = Just (mkDelBtn i wrapperClass, wrapperClass, c)
-                fv <- mkView field fs r del msErrWidget msWrapperErrClass i n False
+                let del = Just (mkDelBtn i, wrapperClass, c)
+                fv <- mkView field fs r del msErrWidget msWrapperErrClass i n True
                 return (res, fv)
             xs = zip (mkNames counter) results
             notSuccNothing (_, (r,_)) = not $ isSuccNothing r
@@ -399,10 +399,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         });
 
                         // set new counter on wrapper
-                        newWrapper.data("counter", newNumber);
-
-                        //var newField = newWrapper.find("[id^=" + #{theId} + "]"); 
-                        //newField.val("").attr('name', newName).attr('id', newId);
+                        newWrapper.attr("data-counter", newNumber);
 
                         var newDelBtn = newWrapper.find("[id^=" + #{delBtnPrefix} + "]");
                         newDelBtn.prop('id', newDelId);

From 1c742a83d3383dce4766703c612c78c54b85c5fe Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Sun, 15 Nov 2020 22:31:35 +0000
Subject: [PATCH 12/22] Fixed tooltip styling in Bootstrap 4

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 30 +++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 7dcc9e67..bfe37f70 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -97,7 +97,12 @@ data MultiView site = MultiView
 --
 -- @since 1.6.0
 bs3Settings :: MultiSettings site
-bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has-error" Nothing Nothing (Just errW)
+bs3Settings = MultiSettings
+    "btn btn-default"
+    "btn btn-danger"
+    "help-block"
+    "has-error"
+    Nothing Nothing (Just errW)
     where
         errW err = 
             [whamlet|
@@ -108,7 +113,12 @@ bs3Settings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has
 --
 -- @since 1.6.0
 bs4Settings :: MultiSettings site
-bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "has-error" Nothing Nothing (Just errW)
+bs4Settings = MultiSettings
+    "btn btn-secondary"
+    "btn btn-danger"
+    "form-text text-muted"
+    "has-error"
+    Nothing Nothing (Just errW)
     where
         errW err =
             [whamlet|
@@ -120,7 +130,12 @@ bs4Settings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "h
 --
 -- @since 1.7.0
 bs3FASettings :: MultiSettings site
-bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
+bs3FASettings = MultiSettings
+    "btn btn-default"
+    "btn btn-danger"
+    "help-block"
+    "has-error"
+    addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -134,7 +149,12 @@ bs3FASettings = MultiSettings "btn btn-default" "btn btn-danger" "help-block" "h
 --
 -- @since 1.7.0
 bs4FASettings :: MultiSettings site
-bs4FASettings = MultiSettings "btn btn-secondary" "btn btn-danger" "help-block" "has-error" addIcon delIcon (Just errW)
+bs4FASettings = MultiSettings
+    "btn btn-secondary"
+    "btn btn-danger"
+    "form-text text-muted"
+    "has-error"
+    addIcon delIcon (Just errW)
     where
         addIcon = Just [shamlet|<i class="fas fa-plus">|]
         delIcon = Just [shamlet|<i class="fas fa-trash-alt">|]
@@ -167,7 +187,7 @@ amulti field fs defs minVals ms = formToAForm $
                 widget = do
                     [whamlet|
                         $maybe tooltip <- fvTooltip fv
-                            <span .#{msTooltipClass ms}>#{tooltip}
+                            <small .#{msTooltipClass ms}>#{tooltip}
 
                         ^{fvInput mvCounter}
 

From fcda22ec5cb1bdd04ba19f00ad21d0124f3519b2 Mon Sep 17 00:00:00 2001
From: James Burton <burtannia1997@gmail.com>
Date: Mon, 16 Nov 2020 00:54:33 +0000
Subject: [PATCH 13/22] Clearing fields now triggers the change event

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index bfe37f70..096a8a6b 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -308,7 +308,9 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         e.prop('checked', false);
 
                     if(!keepValueTypes.includes(e.prop('type')))
-                        e.val("");
+                        e.val("").trigger("change");
+                        // trigger change is to ensure WYSIWYG editors are updated
+                        // when their hidden code field is cleared
                 }
             |]
 

From e619b8d6ffe46f4b5a34d6913e60e129679b78b6 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Tue, 17 Nov 2020 21:00:42 +0000
Subject: [PATCH 14/22] Updated since annotations in docs

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 096a8a6b..70f39d96 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -47,7 +47,7 @@ instance ToJavascript Text where toJavascript = toJavascript . toJSON
 -- You can override this by specifying an alternative value in a class
 -- which is then passed inside 'MultiSettings'.
 --
--- @since 1.6.0
+-- @since 1.7.0
 data MultiSettings site = MultiSettings
     { msAddClass :: !Text -- ^ Class to be applied to the "add another" button.
     , msDelClass :: !Text -- ^ Class to be applied to the "delete" button.
@@ -85,7 +85,7 @@ data MultiSettings site = MultiSettings
 -- >     flex-direction: row;
 -- > }
 --
--- @since 1.6.0
+-- @since 1.7.0
 data MultiView site = MultiView
     { mvCounter :: FieldView site -- ^ Hidden counter field.
     , mvFields :: [FieldView site] -- ^ Input fields.

From ee5b2e129d77f88f2e8d16e8e3600582fe2f1fc3 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Tue, 17 Nov 2020 21:01:54 +0000
Subject: [PATCH 15/22] Updated changelog and readme

---
 yesod-form-multi/ChangeLog.md | 11 +++++++++++
 yesod-form-multi/README.md    |  4 +---
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/yesod-form-multi/ChangeLog.md b/yesod-form-multi/ChangeLog.md
index c2dfe41b..577fed70 100644
--- a/yesod-form-multi/ChangeLog.md
+++ b/yesod-form-multi/ChangeLog.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 1.7.0
+
+* Added delete buttons
+* Added support for custom text or icons inside add/delete buttons
+* Added new presets for Bootstrap + Font Awesome icons
+* Added support for more complex fields that have multiple parts stuch as radio fields
+* Improved support for fields that rely on hidden inputs like WYSIWYG editors
+* Fixed redundant class in existing Bootstrap presets
+* Fixed styling not applying to error messages on individual fields
+* Tooltips now show once at the top of the multi-field group when using `amulti`
+
 ## 1.6.0
 
 * Added `Yesod.Form.MultiInput` which supports multi-input forms without needing to submit the form to add an input field [#1601](https://github.com/yesodweb/yesod/pull/1601)
\ No newline at end of file
diff --git a/yesod-form-multi/README.md b/yesod-form-multi/README.md
index 58282125..f29b7fe6 100644
--- a/yesod-form-multi/README.md
+++ b/yesod-form-multi/README.md
@@ -1,7 +1,5 @@
 ## yesod-form-multi
 
 Support for creating forms in which the user can specify how many inputs to submit. Includes support for enforcing a minimum number of values.
-Intended as an alternative to `Yesod.Form.MassInput`.
 
-# Limitations
-- If the user adds too many fields then there is currently no support for a "delete button" although fields submitted empty are considered to be deleted.
\ No newline at end of file
+Intended as an alternative to `Yesod.Form.MassInput`.
\ No newline at end of file

From da3723d2c733c519b44ac09fb3a8d0fda7673e3b Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Tue, 17 Nov 2020 21:17:34 +0000
Subject: [PATCH 16/22] Bumped version number to 1.7.0

---
 yesod-form-multi/yesod-form-multi.cabal | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yesod-form-multi/yesod-form-multi.cabal b/yesod-form-multi/yesod-form-multi.cabal
index aa7fe37d..aa67c86d 100644
--- a/yesod-form-multi/yesod-form-multi.cabal
+++ b/yesod-form-multi/yesod-form-multi.cabal
@@ -1,5 +1,5 @@
 name:            yesod-form-multi
-version:         1.6.0
+version:         1.7.0
 license:         MIT
 license-file:    LICENSE
 author:          James Burton <jamesejburton@gmail.com>

From 5c56320c3928ec6d92fd4d056da6e4c4fadca642 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Tue, 17 Nov 2020 21:20:43 +0000
Subject: [PATCH 17/22] Added PR to changelog

---
 yesod-form-multi/ChangeLog.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/yesod-form-multi/ChangeLog.md b/yesod-form-multi/ChangeLog.md
index 577fed70..b4992af5 100644
--- a/yesod-form-multi/ChangeLog.md
+++ b/yesod-form-multi/ChangeLog.md
@@ -2,6 +2,8 @@
 
 ## 1.7.0
 
+[#1707](https://github.com/yesodweb/yesod/pull/1707)
+
 * Added delete buttons
 * Added support for custom text or icons inside add/delete buttons
 * Added new presets for Bootstrap + Font Awesome icons
@@ -13,4 +15,6 @@
 
 ## 1.6.0
 
-* Added `Yesod.Form.MultiInput` which supports multi-input forms without needing to submit the form to add an input field [#1601](https://github.com/yesodweb/yesod/pull/1601)
\ No newline at end of file
+[#1601](https://github.com/yesodweb/yesod/pull/1601)
+
+* Added `Yesod.Form.MultiInput` which supports multi-input forms without needing to submit the form to add an input field
\ No newline at end of file

From 0f51f9133419e8658c1acf112946c1151b458cd9 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Tue, 17 Nov 2020 22:12:59 +0000
Subject: [PATCH 18/22] Removed dependency on Semigroup

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 70f39d96..07581ae3 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -315,7 +315,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             |]
 
         mkDelBtn fieldId = do
-            let delBtnId = delBtnPrefix <> fieldId
+            let delBtnId = delBtnPrefix `T.append` fieldId
             [whamlet|
                 <button ##{delBtnId} .#{msDelClass} style="margin-left: 0.75rem" type="button">
                     $maybe inner <- msDelInner

From 2eec150289afbfab25e788611b1befe26f998d7b Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Wed, 18 Nov 2020 05:16:12 +0000
Subject: [PATCH 19/22] Moved JS constant inside function

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 07581ae3..507f3751 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -299,10 +299,10 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         wrapper.remove();
                 }
 
-                // input types where we don't want to reset the value
-                const keepValueTypes = ["radio", "checkbox", "button"];
-
                 function removeVals(e) {
+                    // input types where we don't want to reset the value
+                    const keepValueTypes = ["radio", "checkbox", "button"];
+
                     // uncheck any checkboxes or radio fields and empty any text boxes
                     if(e.prop('checked') == true)
                         e.prop('checked', false);

From 91c1a7fac7876a57aae896c90f0f0b1c57e185fd Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Wed, 18 Nov 2020 07:14:40 +0000
Subject: [PATCH 20/22] Fixed name clashes when using more than one instance of
 a multi-field

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 507f3751..4fdb4d8d 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -29,6 +29,7 @@ import qualified Data.Map as Map
 import Data.Maybe (fromJust, listToMaybe, fromMaybe, isJust)
 import Data.Text (Text)
 import qualified Data.Text as T
+import Text.Julius (rawJS)
 import Yesod.Core
 import Yesod.Form.Fields (intField)
 import Yesod.Form.Functions
@@ -221,7 +222,7 @@ mmulti :: (site ~ HandlerSite m, MonadHandler m, RenderMessage site FormMessage)
     -> MultiSettings site
     -> MForm m (FormResult [a], MultiView site)
 mmulti field fs defs minVals' ms = do
-    wrapperClass <- newFormIdent
+    wrapperClass <- lift newIdent
     let minVals = if minVals' < 0 then 0 else minVals'
     mhelperMulti field fs wrapperClass defs minVals ms
 
@@ -238,11 +239,11 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     mp <- askParams
     (_, site, langs) <- ask
     name <- maybe newFormIdent return fsName
-    theId <- maybe newFormIdent return fsId
+    theId <- lift $ maybe newIdent return fsId
     cName <- newFormIdent
-    cid <- newFormIdent
-    addBtnId <- newFormIdent
-    delBtnPrefix <- newFormIdent
+    cid <- lift newIdent
+    addBtnId <- lift newIdent
+    delBtnPrefix <- lift newIdent
 
     let mr2 = renderMessage site langs
         cDef = length defs
@@ -286,7 +287,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     -- each delete button to ensure that the function only gets included once.
     let delFunction = toWidget
             [julius|
-                function deleteField(wrapper) {
+                function deleteField_#{rawJS theId}(wrapper) {
                     var numFields = $("." + #{wrapperClass}).length;
 
                     if (numFields == 1)
@@ -327,7 +328,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                 [julius|
                     $("#" + #{delBtnId}).click(function() {
                         var field = $("#" + #{fieldId});
-                        deleteField(field.parents("." + #{wrapperClass}));
+                        deleteField_#{rawJS theId}(field.parents("." + #{wrapperClass}));
                     });                    
                 |]
 
@@ -380,10 +381,10 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             delFunction -- function used by delete buttons, included here so that it only gets included once
             toWidget
                 [julius|
-                    var extraFields = 0;
+                    var extraFields_#{rawJS theId} = 0;
                     $("#" + #{addBtnId}).click(function() {
-                        extraFields++;
-                        var newNumber = parseInt(#{show counter}) + extraFields;
+                        extraFields_#{rawJS theId}++;
+                        var newNumber = parseInt(#{show counter}) + extraFields_#{rawJS theId};
                         $("#" + #{cid}).val(newNumber);
                         var newName = #{name} + "-" + newNumber;
                         var newId = #{theId} + "-" + newNumber;
@@ -425,7 +426,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
 
                         var newDelBtn = newWrapper.find("[id^=" + #{delBtnPrefix} + "]");
                         newDelBtn.prop('id', newDelId);
-                        newDelBtn.click(() => deleteField(newWrapper));
+                        newDelBtn.click(() => deleteField_#{rawJS theId}(newWrapper));
 
                         newWrapper.insertBefore("#" + #{addBtnId});
                     });

From f2d3f3d8da28954f447249215028e8e8640f8511 Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 20 Nov 2020 02:47:19 +0000
Subject: [PATCH 21/22] Replaced JS string concatenation with rawJS

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index 4fdb4d8d..c1f29371 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -288,7 +288,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
     let delFunction = toWidget
             [julius|
                 function deleteField_#{rawJS theId}(wrapper) {
-                    var numFields = $("." + #{wrapperClass}).length;
+                    var numFields = $('.#{rawJS wrapperClass}').length;
 
                     if (numFields == 1)
                     {
@@ -326,9 +326,9 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             |]
             toWidget
                 [julius|
-                    $("#" + #{delBtnId}).click(function() {
-                        var field = $("#" + #{fieldId});
-                        deleteField_#{rawJS theId}(field.parents("." + #{wrapperClass}));
+                    $('##{rawJS delBtnId}').click(function() {
+                        var field = $('##{rawJS fieldId}');
+                        deleteField_#{rawJS theId}(field.parents('.#{rawJS wrapperClass}'));
                     });                    
                 |]
 
@@ -382,7 +382,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
             toWidget
                 [julius|
                     var extraFields_#{rawJS theId} = 0;
-                    $("#" + #{addBtnId}).click(function() {
+                    $('##{rawJS addBtnId}').click(function() {
                         extraFields_#{rawJS theId}++;
                         var newNumber = parseInt(#{show counter}) + extraFields_#{rawJS theId};
                         $("#" + #{cid}).val(newNumber);
@@ -391,8 +391,8 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         var newDelId = #{delBtnPrefix} + newId;
                         
                         // get new wrapper and remove old error messages
-                        var newWrapper = $("." + #{wrapperClass}).first().clone();
-                        newWrapper.children( ":not(." + #{wrapperClass} + "-inner)" ).remove();
+                        var newWrapper = $('.#{rawJS wrapperClass}').first().clone();
+                        newWrapper.children( ':not(.#{rawJS wrapperClass}-inner)' ).remove();
 
                         // get counter from wrapper
                         var oldCount = newWrapper.data("counter");
@@ -424,11 +424,11 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         // set new counter on wrapper
                         newWrapper.attr("data-counter", newNumber);
 
-                        var newDelBtn = newWrapper.find("[id^=" + #{delBtnPrefix} + "]");
+                        var newDelBtn = newWrapper.find('[id^=#{rawJS delBtnPrefix}]');
                         newDelBtn.prop('id', newDelId);
                         newDelBtn.click(() => deleteField_#{rawJS theId}(newWrapper));
 
-                        newWrapper.insertBefore("#" + #{addBtnId});
+                        newWrapper.insertBefore('##{rawJS addBtnId}');
                     });
                 |]
 

From c60430e69e42391d35c0c6b6b8e0bbc08c24dfed Mon Sep 17 00:00:00 2001
From: Burtannia <jamesejburton@gmail.com>
Date: Fri, 20 Nov 2020 02:51:34 +0000
Subject: [PATCH 22/22] Wrapper error class is now removed on copy

---
 yesod-form-multi/Yesod/Form/MultiInput.hs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/yesod-form-multi/Yesod/Form/MultiInput.hs b/yesod-form-multi/Yesod/Form/MultiInput.hs
index c1f29371..b9bc76d5 100644
--- a/yesod-form-multi/Yesod/Form/MultiInput.hs
+++ b/yesod-form-multi/Yesod/Form/MultiInput.hs
@@ -393,6 +393,7 @@ mhelperMulti field@Field {..} fs@FieldSettings {..} wrapperClass defs minVals Mu
                         // get new wrapper and remove old error messages
                         var newWrapper = $('.#{rawJS wrapperClass}').first().clone();
                         newWrapper.children( ':not(.#{rawJS wrapperClass}-inner)' ).remove();
+                        newWrapper.removeClass(#{msWrapperErrClass});
 
                         // get counter from wrapper
                         var oldCount = newWrapper.data("counter");