--- a/js/taggingtext.js	Tue Mar 17 13:58:34 2015 +0100
+++ b/js/taggingtext.js	Thu Mar 19 09:53:26 2015 +0100
@@ -3,6 +3,8 @@
 var stringBeforeChangeStack = [];
 var lastAddTag="";
 
+var regex_element_index = 0;
+
 window.onbeforeunload = function() {
     return "Are you sure?";
 };
@@ -413,6 +415,7 @@
     $('#smartRegexPopUpDel').attr("disabled", "disabled");
     $('#smartRegexPopUpBack').attr("disabled", "disabled");
     $('#smartRegexPopUpFor').attr("disabled", "disabled");
+
 }
 
 function replaceSmartClose() {
@@ -429,11 +432,12 @@
     $('#smartRegexShowDiv > #'+thisObject).attr("regexText", $("#smartRegexPopUpText").val());
     $('#smartRegexShowDiv > #'+thisObject).attr("regexReplace", $("#smartRegexPopUpSelectTag").val());
     $('#smartRegexShowDiv > #'+thisObject).text($("#smartRegexPopUpName").val());  // smartRgextPopUpName.val() is the name of this regex
-
+    // id should be the same as it was
 }   
 
 function replaceSmartDel() {
     thisObject = $('#smartRegexPopUpDiv').attr("editID");
+
     $('#smartRegexShowDiv > #'+thisObject).remove();
 }
 
@@ -457,14 +461,25 @@
 
 function replaceSmartAdd() {
     var newdiv = document.createElement("span");
-    newdiv.innerHTML = " "+$("#smartRegexPopUpName").val()+" ";
+    //newdiv.innerHTML = " "+$("#smartRegexPopUpName").val()+" ";
+    //newdiv.innerHTML = $("#smartRegexPopUpName").val();
+    $(newdiv).text($("#smartRegexPopUpName").val());
+
     $(newdiv).css("border", "1px solid black");
     $(newdiv).css("width", "100px");
     
     $(newdiv).attr("class", "span_"+$("#smartRegexPopUpSelectTag").val());
-    $(newdiv).attr("id", "span_"+$("#smartRegexPopUpName").val());
+
+
+
+    // id is the name from user's input, which dose not guarantee to be unique
+    // id should be unique
+    regex_element_index += 1;
+    $(newdiv).attr("id", "regex_elem_"+regex_element_index);
+    // $(newdiv).attr("id", "span_"+$("#smartRegexPopUpName").val());
     $(newdiv).attr("regexText", $("#smartRegexPopUpText").val());
     $(newdiv).attr("regexReplace", $("#smartRegexPopUpSelectTag").val());
+
     
     $('#smartRegexShowDiv').append(newdiv);
     
@@ -485,15 +500,8 @@
 
     $('#smartRegexPopUpDiv').attr("editID", $(this).attr("id"));
     
-    
-    var _id = $(this).attr("id");
-    var aa = document.getElementById(_id);
-    var name = aa.textContent;
-   
-    $('#smartRegexPopUpName').val(name);
+    $('#smartRegexPopUpName').val($(this).text());
     // $('#smartRegexPopUpName').val($(this).html());
-    // why there is a <span i="transmark"></span> inbetween? 
-
 
     $('#smartRegexPopUpText').val($(this).attr("regexText"));
     $('#smartRegexPopUpSelectTag').val($(this).attr("regexReplace"));
@@ -507,6 +515,7 @@
 
 function smartRegexEmpty() {
     $('#smartRegexShowDiv').html("");
+    regex_element_index = 0;
 }
 
 function replaceSmartRunWithBr() {
@@ -776,8 +785,20 @@
     RegexLoadedName = $('#loadRegexSelect').val();
     var divName = "#div_"+RegexLoadedName;
     var name = $(divName).html();
-    $('#smartRegexShowDiv').html(name );
+    $('#smartRegexShowDiv').html(name);
     $('#load_regex_div').css("display", "none");
+
+    // get the largest regex element index in the regex file
+    // for all children (span) in #smartRegexShowDiv, find MAX(id)
+    var regex_elem = $('#smartRegexShowDiv').children();   
+    var max_id = 0;
+    for (var i = 0; i < regex_elem.length; i++) {
+        var r_id = parseInt(regex_elem[i].id.slice(11));    // cut the first 11 char out: "regex_elem_"
+        if (r_id > max_id) {
+            max_id = r_id;
+        }
+    }
+    regex_element_index = max_id;
 }
 // ===