Looping over array and comparing to regex

Question

So, I'll admit to being a bit of a JS noob, but as far as I can tell, this should be working and it is not.

Background:

I have a form with 3 list boxes. The list boxes are named app1, db1, and db2. I'm using javascript to allow the user to add additional list boxes, increasing the name tag for each additional select box.

When I add additional app named boxes, the value increments properly for each additional field. If I try to add addtional db named selects, it fails to recognize the 2nd tag on the first loop through the array. This causes me to end up with 2 elements named db2. On each subsequent tag, it is recognized properly and is properly incremented.

Here is the HTML for the db1 tag:

<select name="db1">
  *options*
</select>

And db2:

<select name="db2">
  *options*
</select>

The tags are identical. Here is the function that I am using to figure out the next number in the sequence (note: tag is either app or db, tags is an array of all select tag names in the DOM, if I inspect tags, it gives me ['app1', 'db1', 'db2', '']):

function return_select_name(tag, tags) {
  matches = new Array();
  var re = new RegExp(tag + "\\d+", "g");
  for (var i = 0; i < tags.length; i++) {
    var found = re.exec(tags[i]);
    if (found != null) {
      matches.push(found[0]);
    }
  }
  matches = matches.sort();
  index = parseInt(/\d+/.exec(matches.last())) + 1;
  index = tag + index;
  return index;
}

If I add an app tag, it will return 'app2'. If I search for a db tag, it will return 'db2' on the first time through, db3 on the 2nd, etc, etc.

So basically, I'm sure I'm doing something wrong here.

Answer 1

I'd handle it by keeping a counter for db and a counter for app to use to generate the names.

var appCounter = 1;//set this manually or initialize to 0 and
var dbCounter = 2;//use your create function to add your elements on pageload

Then, when you go to create your next tag, just increment your counter and use that as the suffix for your name:

var newAppElement = document.createElement('select');
newAppElement.name = 'app' + (++appCounter);
..

//  --OR for the db element--

var newDbElement = document.createElement('select');
newDbElement.name = 'db' + (++dbCounter );
..