From 84205212b45ebaef1969e688fea1eb544cee78f4 Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 5 Jan 2011 03:26:30 -0500
Subject: [PATCH] Fix for Bug 5006 - Invalid XHTML in record matching rules
 template

- Rework JavaScript clone routines to use jQuery, to take
  label "for" into account, to handle incrementing label,
  and to properly place cloned blocks at the bottom of the group
- Rework JavaScript delete routines to use jQuery, to take
  block label numbers into account, and to show the "add"
  link if you have deleted the last block.
- Correcting markup which nests <div> inside <fieldset>
- Ensuring labels' "for" attribute matches input IDs
- Adding "required" style to required fields

Signed-off-by: Nicole Engard <nengard@bywatersolutions.com>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
---
 .../prog/en/css/staff-global.css              |   1 +
 .../prog/en/modules/admin/matching-rules.tmpl | 273 +++++++++---------
 2 files changed, 135 insertions(+), 139 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 9cc5ba0d10..b6d439d1dd 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -1919,3 +1919,4 @@ ul.budget_hierarchy li:first-child:after {
 	padding : 1em;
 	margin : 1em 0;
 }
+fieldset.rows+h3 {clear:both;padding-top:.5em;}
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/matching-rules.tmpl b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/matching-rules.tmpl
index bfa2ed9392..d0b9a2037b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/matching-rules.tmpl
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/matching-rules.tmpl
@@ -20,75 +20,91 @@ var maxMatchPoint = <!-- TMPL_VAR name="max_matchpoint" -->;
 var maxMatchCheck = <!-- TMPL_VAR name="max_matchcheck" -->;
 
 function InsertMatchpoint(loc, index) {
-    var original= document.getElementById(index);
-    var clone = original.cloneNode(true);
-    clone.style.display = 'block';
+    var original= $("#"+index);
+    var clone = original.clone();
+    clone.show();
 
     // update IDs and form names
     maxMatchPoint++;
-    clone.setAttribute('id', 'mp_' + maxMatchPoint);
-    var divs = clone.getElementsByTagName('div');
-    for (var i = 0; i < divs.length; i++) {
-        var s = divs[i].getAttribute('id');
+    clone.attr('id', 'mp_' + maxMatchPoint);
+    $("span.counter",clone).html(maxMatchPoint);
+    $("label",clone).each(function(){
+      var s = $(this).attr("for");
         if (s.match(/mp_num/)) {
-            divs[i].setAttribute('id', s.replace(/mp_num/, 'mp_' + maxMatchPoint));
+            $(this).attr("for",s.replace(/mp_num/, 'mp_' + maxMatchPoint));
         }
-    }
-    var inputs = clone.getElementsByTagName('input');
-    for (var i = 0; i < inputs.length; i++) {
-        var s = inputs[i].getAttribute('id');
+    });
+
+    $("div",clone).each(function(){
+      var s = $(this).attr("id");
         if (s.match(/mp_num/)) {
-            inputs[i].setAttribute('id', s);
-            inputs[i].setAttribute('id', s.replace(/mp_num/, 'mp_' + maxMatchPoint));
+            $(this).attr("id",s.replace(/mp_num/, 'mp_' + maxMatchPoint));
         }
-        var s = inputs[i].getAttribute('name');
-        if (s.match(/mp_num/)) {
-            inputs[i].setAttribute('name', s.replace(/mp_num/, 'mp_' + maxMatchPoint));
+    });
+    $("input",clone).each(function(){
+        var s = $(this).attr("id");
+        if(s.match(/mp_num/)){
+          $(this).attr("id",s.replace(/mp_num/, 'mp_' + maxMatchPoint));
         }
-    }
 
-    loc.parentNode.parentNode.insertBefore(clone, loc.nextSibling);
+        var s = $(this).attr("name");
+        if(s.match(/mp_num/)){
+          $(this).attr("name",s.replace(/mp_num/, 'mp_' + maxMatchPoint));
+        }
+    });
+    $("#match_points").append(clone);
 }
 
 function InsertMatchcheck(loc, index) {
-    var original= document.getElementById(index);
-    var clone = original.cloneNode(true);
-    clone.style.display = 'block';
+    var original= $("#"+index);
+    var clone = original.clone();
+    clone.show();
 
     // update IDs and form names
     maxMatchCheck++;
-    clone.setAttribute('id', 'mc_' + maxMatchCheck);
-    var divs = clone.getElementsByTagName('div');
-    for (var i = 0; i < divs.length; i++) {
-        var s = divs[i].getAttribute('id');
+    clone.attr('id', 'mc_' + maxMatchCheck);
+    $("span.counter",clone).html(maxMatchCheck);
+    $("label",clone).each(function(){
+      var s = $(this).attr("for");
         if (s.match(/mc_num/)) {
-            divs[i].setAttribute('id', s.replace(/mc_num/, 'mc_' + maxMatchCheck));
+            $(this).attr("for",s.replace(/mc_num/, 'mc_' + maxMatchCheck));
         }
-    }
-    var inputs = clone.getElementsByTagName('input');
-    for (var i = 0; i < inputs.length; i++) {
-        var s = inputs[i].getAttribute('id');
+    });
+
+    $("div",clone).each(function(){
+      var s = $(this).attr("id");
         if (s.match(/mc_num/)) {
-            inputs[i].setAttribute('id', s);
-            inputs[i].setAttribute('id', s.replace(/mc_num/, 'mc_' + maxMatchCheck));
+            $(this).attr("id",s.replace(/mc_num/, 'mc_' + maxMatchCheck));
         }
-        var s = inputs[i].getAttribute('name');
-        if (s.match(/mc_num/)) {
-            inputs[i].setAttribute('name', s.replace(/mc_num/, 'mc_' + maxMatchCheck));
+    });
+    $("input",clone).each(function(){
+        var s = $(this).attr("id");
+        if(s.match(/mc_num/)){
+          $(this).attr("id",s.replace(/mc_num/, 'mc_' + maxMatchCheck));
         }
-    }
 
-    loc.parentNode.parentNode.insertBefore(clone, loc.nextSibling);
+        var s = $(this).attr("name");
+        if(s.match(/mc_num/)){
+          $(this).attr("name",s.replace(/mc_num/, 'mc_' + maxMatchCheck));
+        }
+    });
+    $("#match_checks").append(clone);
 }
 
 function DeleteMatchpoint(loc) {
-    var parentdiv = loc.parentNode.parentNode.parentNode;
-    parentdiv.parentNode.removeChild(parentdiv);
+    $(loc).parent().parent().parent().remove();
+    if($(".matchgroup",$("#match_points")).length == 0){
+      maxMatchPoint = 0;
+      $("#addMatchPoint").show();
+    }
 }
 
 function DeleteMatchcheck(loc) {
-    var parentdiv = loc.parentNode.parentNode.parentNode;
-    parentdiv.parentNode.removeChild(parentdiv);
+    $(loc).parent().parent().parent().remove();
+    if($(".matchgroup",$("#match_checks")).length == 0){
+      maxMatchCheck = 0;
+      $("#addMatchCheck").show();
+    }
 }
 
 function DoCancel(f) {
@@ -145,7 +161,11 @@ function CheckRuleForm(f) {
 //]]>
 </script>
 <style type="text/css">
+  fieldset.rows fieldset.rows { border-width : 0; }
+  fieldset.rows fieldset.rows fieldset.rows { border-width : 1px; }
+  fieldset, fieldset.rows { width : 90%; padding: .3em .6em .3em .6em; }
 	fieldset.rows fieldset {font-size:100%;}
+  div.matchgroup { border:1px solid #DDD; border-left-width: 15px; padding:.4em; margin-bottom:.6em;}
 </style>
 </head>
 <body>
@@ -188,27 +208,31 @@ function CheckRuleForm(f) {
             <input type="hidden" name="code" value="<!-- TMPL_VAR name="code" -->" />
             <!-- TMPL_VAR name="code" -->
           <!-- TMPL_ELSE -->
-		  <label for="code">Matching rule code: </label>
-            <input type="text" id="code" name="code"  size="10" maxlength="10" />
+		  <label for="code" class="required">Matching rule code: </label>
+            <input type="text" id="code" name="code"  size="10" maxlength="10" /> <span class="required">Required</span>
           <!-- /TMPL_IF -->
        </li>
-       <li><label for="description">Description: </label>
+       <li><label for="description" class="required">Description: </label>
            <input type="text" id="description" name="description" size="50" maxlength="250" 
-                  value="<!-- TMPL_VAR name="description" escape="HTML" -->" />
+                  value="<!-- TMPL_VAR name="description" escape="HTML" -->" /> <span class="required">Required</span>
        </li>
-       <li><label for="description">Match threshold: </label>
+       <li><label for="threshold" class="required">Match threshold: </label>
            <input type="text" id="threshold" name="threshold" size="5" maxlength="5" 
-                  value="<!-- TMPL_VAR name="threshold" escape="HTML" -->" />
+                  value="<!-- TMPL_VAR name="threshold" escape="HTML" -->" /> <span class="required">Required</span>
        </li>
     </ol>
   </fieldset>
-  <fieldset class="rows">
-  <legend >Match points <a class="button" onclick="InsertMatchpoint(this, 'mp_template')">Add matchpoint</a></legend>
+
+  <fieldset class="rows" id="match_points">
+  <h4>Match points</h4>
+  <!-- TMPL_IF name="edit_matching_rule" -->
+  <!-- TMPL_IF NAME="matchpoints" --><p id="addMatchPoint" style="display:none;"><!-- TMPL_ELSE --><p id="addMatchPoint"><!-- /TMPL_IF --><a href="#" class="button" onclick="InsertMatchpoint('mp_1', 'mp_template'); return false;">Add match point</a></p>
+  <!-- TMPL_ELSE --><p id="addMatchPoint" style="display:none;"><a href="#" class="button" onclick="InsertMatchpoint('mp_1', 'mp_template'); return false;">Add match point</a></p><!-- /TMPL_IF -->
   <!-- TMPL_IF name="edit_matching_rule" -->
   <!-- TMPL_LOOP name="matchpoints" -->
-  <div id="mp_<!-- TMPL_VAR name="mp_num" -->">
+  <div id="mp_<!-- TMPL_VAR name="mp_num" -->" class="matchgroup">
   <fieldset class="rows">
-    <legend><a class="button" onclick="DeleteMatchpoint(this)">Remove this matchpoint</a></legend>
+    <legend>Match Point <!-- TMPL_VAR NAME="mp_num" --> | <a href="#" class="button" onclick="InsertMatchpoint('mp_<!-- TMPL_VAR NAME="mp_num" -->', 'mp_template'); return false;">Add match point</a> | <a href="#" class="button" onclick="DeleteMatchpoint(this); return false;">Remove this match point</a></legend>
     <ol>
       <li>
         <label for="mp_<!-- TMPL_VAR name="mp_num" -->_search_index">Search index: </label>
@@ -224,9 +248,10 @@ function CheckRuleForm(f) {
                value="<!-- TMPL_VAR name="score" escape="HTML" -->" 
                maxlength="5" />
       </li>
+      </ol>
       <!-- TMPL_LOOP name="components" -->
-      <div id="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->">
-      <fieldset class="rows">
+      <fieldset class="rows" id="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->">
+      <legend>Matchpoint components</legend>
         <ol>
           <li>
             <label for="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_tag">Tag: </label>
@@ -256,29 +281,28 @@ function CheckRuleForm(f) {
                    value="<!-- TMPL_VAR name="length" escape="HTML" -->"
                    size="5" maxlength="5" />
           </li>
-          <!-- TMPL_LOOP name="norms" -->
-          <div id="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num"-->">
-              <li>
-                <label for="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n__<!-- TMPL_VAR name="norm_num"-->">Normalization rule: </label>
+              <!-- TMPL_LOOP name="norms" -->
+              <li id="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num"-->">
+                <label for="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n__<!-- TMPL_VAR name="norm_num"-->_norm">Normalization rule: </label>
                 <input type="text" id="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n__<!-- TMPL_VAR name="norm_num"-->_norm" 
                        name="mp_<!-- TMPL_VAR name="mp_num" -->_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num"-->_norm" 
                        value="<!-- TMPL_VAR name="norm" escape="HTML" -->"
                        size="20" maxlength="50" />
               </li>
-          </div>
-          <!-- /TMPL_LOOP -->
+              <!-- /TMPL_LOOP -->
         </ol>
       </fieldset>
-      </div>
       <!-- /TMPL_LOOP -->
-    </ol>
+      </fieldset>
+      <br style="clear:both;" />
+      </div>
   </fieldset>
-  </div>
+
   <!-- /TMPL_LOOP -->
   <!-- TMPL_ELSE -->
-  <div id="mp_1">
+  <div id="mp_1" class="matchgroup">
   <fieldset class="rows">
-    <legend><a class="button" onclick="DeleteMatchpoint(this)">Remove this matchpoint</a></legend>
+    <legend>Match Point 1 | <a href="#" class="button" onclick="InsertMatchpoint('mp_1', 'mp_template'); return false;">Add match point</a> | <a href="#" class="button" onclick="DeleteMatchpoint(this); return false;">Remove this match point</a></legend>
     <ol>
       <li>
         <label for="mp_1_search_index">Search index: </label>
@@ -289,8 +313,9 @@ function CheckRuleForm(f) {
         <label for="mp_1_score">Score: </label>
         <input type ="text" id="mp_1_score" name="mp_1_score" size="5" maxlength="5" />
       </li>
-      <div id="mp_1_c_1">
-      <fieldset class="rows">
+    </ol>
+    <fieldset class="rows" id="mp_1_c_1">
+      <legend>Matchpoint components</legend>
         <ol>
           <li>
             <label for="mp_1_c_1_tag">Tag: </label>
@@ -308,32 +333,31 @@ function CheckRuleForm(f) {
             <label for="mp_1_c_1_length">Length: </label>
             <input type="text" id="mp_1_c_1_length" name="mp_1_c_1_length" size="5" maxlength="5" />
           </li>
-          <div id="mp_1_c_1_n_1">
-            <li>
+            <li id="mp_1_c_1_n_1">
               <label for="mp_1_c_1_n_1_norm">Normalization rule: </label>
               <input type="text" id="mp_1_c_1_n_1_norm" name="mp_1_c_1_n_1_norm" size="20" maxlength="50" />
             </li>
-          </div>
         </ol>
-      </fieldset>
+    </fieldset>
+    </fieldset>
+      <br style="clear:both;" />
       </div>
-    </ol>
+
   </fieldset>
-  </div>
   <!-- /TMPL_IF -->
-  </fieldset>
-  <fieldset class="rows">
-  <legend >Required match checks <a class="button" onclick="InsertMatchcheck(this, 'mc_template')">Add match check</a></legend>
+
+  <fieldset class="rows" id="match_checks">
+  <h4>Required match checks</h4>
+  <!-- TMPL_IF name="edit_matching_rule" -->
+  <!-- TMPL_IF NAME="matchchecks" --><p id="addMatchCheck" style="display:none;"><!-- TMPL_ELSE --><p id="addMatchCheck"><!-- /TMPL_IF --><a href="#" class="button" onclick="InsertMatchcheck('mc_1', 'mc_template'); return false;">Add match check</a></p>
+  <!-- TMPL_ELSE --><p id="addMatchCheck" style="display:none;"><a href="#" class="button" onclick="InsertMatchcheck('mc_1', 'mc_template'); return false;">Add match check</a></p><!-- /TMPL_IF -->
   <!-- TMPL_IF name="edit_matching_rule" -->
   <!-- TMPL_LOOP name="matchchecks" -->
-  <div id="mc_<!-- TMPL_VAR name="mc_num" -->">
-  <fieldset class="rows">
-    <legend><a class="button" onclick="DeleteMatchcheck(this)">Remove this match check</a></legend>
+  <fieldset class="rows" id="mc_<!-- TMPL_VAR name="mc_num" -->">
+    <legend>Match check <!-- TMPL_VAR NAME="mc_num" --><a href="#" class="button" onclick="InsertMatchcheck('mc_<!-- TMPL_VAR NAME="mc_num" -->', 'mc_template'); return false;">Add match check</a> | <a href="#" class="button" onclick="DeleteMatchcheck(this); return false;">Remove this match check</a></legend>
     <input type="hidden" id="mc_<!-- TMPL_VAR name="mc_num" -->_id" name="mc_<!-- TMPL_VAR name="mc_num" -->_id" value="1" />
-    <ol>
       <!-- TMPL_LOOP name="src_components" -->
-      <div id="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->">
-      <fieldset class="rows">
+      <fieldset class="rows" id="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->">
         <legend>Source (incoming) record check field</legend>
         <ol>
           <li>
@@ -365,23 +389,19 @@ function CheckRuleForm(f) {
                    size="5" maxlength="5" />
           </li>
           <!-- TMPL_LOOP name="norms" -->
-          <div id="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->">
-            <li>
+            <li id="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->">
               <label for="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm">Normalization rule: </label>
               <input type="text" id="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm" 
                      name="mc_<!-- TMPL_VAR name="mc_num" -->_src_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm" 
                     value="<!-- TMPL_VAR name="norm" escape="HTML" -->"
                     size="20" maxlength="50" />
             </li>
-          </div>
           <!-- /TMPL_LOOP -->
         </ol>
       </fieldset>
-      </div>
       <!-- /TMPL_LOOP -->
       <!-- TMPL_LOOP name="tgt_components" -->
-      <div id="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->">
-      <fieldset class="rows">
+      <fieldset class="rows" id="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->">
         <legend>Target (database) record check field</legend>
         <ol>
           <li>
@@ -413,32 +433,25 @@ function CheckRuleForm(f) {
                    size="5" maxlength="5" />
           </li>
           <!-- TMPL_LOOP name="norms" -->
-          <div id="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->">
-            <li>
+            <li id="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->">
               <label for="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm">Normalization rule: </label>
               <input type="text" id="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm" 
                      name="mc_<!-- TMPL_VAR name="mc_num" -->_tgt_c_<!-- TMPL_VAR name="comp_num" -->_n_<!-- TMPL_VAR name="norm_num" -->_norm" 
                     value="<!-- TMPL_VAR name="norm" escape="HTML" -->"
                     size="20" maxlength="50" />
             </li>
-          </div>
           <!-- /TMPL_LOOP -->
         </ol>
       </fieldset>
-      </div>
       <!-- /TMPL_LOOP -->
-    </ol>
   </fieldset>
-  </div>
   <!-- /TMPL_LOOP -->
   <!-- TMPL_ELSE -->
-  <div id="mc_1">
+  <div id="mc_1" class="matchgroup">
   <fieldset class="rows">
-    <legend><a class="button" onclick="DeleteMatchcheck(this)">Remove this match check</a></legend>
+    <legend>Match check 1 | <a href="#" class="button" onclick="InsertMatchcheck('mc_1', 'mc_template'); return false;">Add match check</a> | <a href="#" class="button" onclick="DeleteMatchcheck(this); return false;">Remove this match check</a></legend>
     <input type="hidden" id="mc_1_id" name="mc_1_id" value="1" />
-    <ol>
-      <div id="mc_1_src_c_1">
-      <fieldset class="rows">
+      <fieldset class="rows" id="mc_1_src_c_1">
         <legend>Source (incoming) record check field</legend>
         <ol>
           <li>
@@ -457,17 +470,14 @@ function CheckRuleForm(f) {
             <label for="mc_1_src_c_1_length">Length: </label>
             <input type="text" id="mc_1_src_c_1_length" name="mc_1_src_c_1_length" size="5" maxlength="5" />
           </li>
-          <div id="mc_1_src_c_1_n_1">
-            <li>
+            <li id="mc_1_src_c_1_n_1">
               <label for="mc_1_src_c_1_n_1_norm">Normalization rule: </label>
               <input type="text" id="mc_1_src_c_1_n_1_norm" name="mc_1_src_c_1_n_1_norm" size="20" maxlength="50" />
             </li>
-          </div>
         </ol>
       </fieldset>
-      </div>
-      <div id="mc_1_tgt_c_1">
-      <fieldset class="rows">
+
+      <fieldset class="rows" id="mc_1_tgt_c_1">
         <legend>Target (database) record check field</legend>
         <ol>
           <li>
@@ -486,17 +496,14 @@ function CheckRuleForm(f) {
             <label for="mc_1_tgt_c_1_length">Length: </label>
             <input type="text" id="mc_1_tgt_c_1_length" name="mc_1_tgt_c_1_length" size="5" maxlength="5" />
           </li>
-          <div id="mc_1_tgt_c_1_n_1">
-            <li>
+            <li id="mc_1_tgt_c_1_n_1">
               <label for="mc_1_tgt_c_1_n_1_norm">Normalization rule: </label>
               <input type="text" id="mc_1_tgt_c_1_n_1_norm" name="mc_1_tgt_c_1_n_1_norm" size="20" maxlength="50" />
             </li>
-          </div>
         </ol>
       </fieldset>
-      </div>
-    </ol>
   </fieldset>
+  <br style="clear:both;" />
   </div>
   <!-- /TMPL_IF -->
   </fieldset>
@@ -576,9 +583,9 @@ function CheckRuleForm(f) {
 
 <!-- /TMPL_IF -->
  <!-- TMPL_IF name="matching_rule_form" -->
-<div id="mp_template" style="display:none">
+<div id="mp_template" class="matchgroup" style="display:none;">
   <fieldset class="rows">
-    <legend><a class="button" onclick="DeleteMatchpoint(this)">Remove this matchpoint</a></legend>
+    <legend>Match point <span class="counter"></span> | <a href="#" class="button" onclick="DeleteMatchpoint(this); return false;">Remove this match point</a></legend>
     <ol>
       <li>
         <label for="mp_num_search_index">Search index: </label>
@@ -589,8 +596,9 @@ function CheckRuleForm(f) {
         <label for="mp_num_score">Score: </label>
         <input type ="text" id="mp_num_score" name="mp_num_score" size="5" maxlength="5" />
       </li>
-      <div id="mp_num_c_1">
-      <fieldset class="rows">
+    </ol>
+      <fieldset id="mp_num_c_1" class="rows">
+      <legend>Matchpoint components</legend>
         <ol>
           <li>
             <label for="mp_num_c_1_tag">Tag: </label>
@@ -608,27 +616,21 @@ function CheckRuleForm(f) {
             <label for="mp_num_c_1_length">Length: </label>
             <input type="text" id="mp_num_c_1_length" name="mp_num_c_1_length" size="5" maxlength="5" />
           </li>
-          <div id="mp_num_c_1_n_1">
-            <li>
+            <li id="mp_num_c_1_n_1">
               <label for="mp_num_c_1_n_1_norm">Normalization rule: </label>
               <input type="text" id="mp_num_c_1_n_1_norm" name="mp_num_c_1_n_1_norm" size="20" maxlength="50" />
             </li>
-          </div>
         </ol>
       </fieldset>
-      </div>
-    </ol>
   </fieldset>
-</div>
-
+      <br style="clear:both;" />
+      </div>
 
-<div id="mc_template" style="display:none">
+<div id="mc_template" class="matchgroup" style="display:none">
 <fieldset class="rows">
-  <legend><a class="button" onclick="DeleteMatchcheck(this)">Remove this match check</a></legend>
+  <legend>Match check <span class="counter"></span> | <a href="#" class="button" onclick="DeleteMatchcheck(this); return false;">Remove this match check</a></legend>
   <input type="hidden" id="mc_num_id" name="mc_num_id" value="1" />
-  <ol>
-    <div id="mc_num_src_c_1">
-    <fieldset class="rows">
+    <fieldset class="rows" id="mc_num_src_c_1">
       <legend>Source (incoming) record check field</legend>
       <ol>
         <li>
@@ -645,19 +647,15 @@ function CheckRuleForm(f) {
         </li>
         <li>
           <label for="mc_num_src_c_1_length">Length: </label>
-          <input type="text" id="mp_num_c_1_length" name="mp_num_c_1_length" size="5" maxlength="5" />
+          <input type="text" id="mc_num_src_c_1_length" name="mc_num_src_c_1_length" size="5" maxlength="5" />
         </li>
-        <div id="mc_num_src_c_1_n_1">
-          <li>
+          <li id="mc_num_src_c_1_n_1">
             <label for="mc_num_src_c_1_n_1_norm">Normalization rule: </label>
             <input type="text" id="mc_num_src_c_1_n_1_norm" name="mc_num_src_c_1_n_1_norm" size="20" maxlength="50" />
           </li>
-        </div>
       </ol>
     </fieldset>
-    </div>
-    <div id="mc_num_tgt_c_1">
-    <fieldset class="rows">
+    <fieldset class="rows" id="mc_num_tgt_c_1">
       <legend>Target (database) record check field</legend>
       <ol>
         <li>
@@ -674,19 +672,16 @@ function CheckRuleForm(f) {
         </li>
         <li>
           <label for="mc_num_tgt_c_1_length">Length: </label>
-          <input type="text" id="mp_num_c_1_length" name="mp_num_c_1_length" size="5" maxlength="5" />
+          <input type="text" id="mc_num_tgt_c_1_length" name="mc_num_tgt_c_1_length" size="5" maxlength="5" />
         </li>
-        <div id="mc_num_tgt_c_1_n_1">
-          <li>
+          <li id="mc_num_tgt_c_1_n_1">
             <label for="mc_num_tgt_c_1_n_1_norm">Normalization rule: </label>
             <input type="text" id="mc_num_tgt_c_1_n_1_norm" name="mc_num_tgt_c_1_n_1_norm" size="20" maxlength="50" />
           </li>
-        </div>
       </ol>
     </fieldset>
-    </div>
-  </ol>
 </fieldset>
+<br style="clear:both;" />
 </div>
 <!-- /TMPL_IF -->
 
-- 
2.39.5