Question

Ok, so what I am trying to achieve is, when the user clicks on add, it will create a new instance of highway along with mallName and frequency, each of which will have a unique id, eg: highway1, mall1, freq1 : highway2, mall2, freq2
etc etc.

But thus far, when I click add, it adds the items, but when I click use the second drop down list that has been generated, or the third, or fourth etc etc, the first list reacts to it!

I am assuming that it is because I am failing to provide a unique ID to the functions that generate the drop down lists.

How can I fix this issue?

Here is the code that dynamically adds new form instances:

$(document).ready(function() {

     $('#btnAdd').click(function() {
            var num     = $('.clonedSection').length;
            var newNum  = new Number(num + 1);

            var newSection = $('#clonedSection' + num).clone().attr('id', 'clonedSection' + newNum);

            newSection.children(':first').children(':first').attr('id', 'mallName' + newNum).attr('name', 'mallName' + newNum);
            newSection.children(':nth-child(2)').children(':first').attr('id', 'frequency' + newNum).attr('name', 'frequency' + newNum);

            $('.clonedSection').last().append(newSection)

            $('#btnDel').attr('disabled','');

            if (newNum == 5)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
            $('#clonedSection' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled','');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });

</script>

Here is the code that generates the dynamic drop down lists:

    <script>
              centres = new Array();
  centres[0] = new Array( 'Brits Spar Centre', 'Safari Plaza', 'Shoprite Centre');
  centres[1] = new Array( 'Xanadu X-ing');
  centres[2] = new Array( 'CheckersHyper Centre', 'City Mall', 'Flamwood Walk Shopping Centre', 'Game Centre', 'Klerksdorp 01', 'MCC Superspar Centre', 'Pick n Pay Hypermarket', 'Songloed Shopping Centre', 'The Terminus');

  centres2 = new Array();
  centres2[0] = new Array( 'BLA Brits Spar Centre', 'Safari Plaza', 'Shoprite Centre');
  centres2[1] = new Array( 'BLA Xanadu X-ing');
  centres2[2] = new Array( 'BLA CheckersHyper Centre', 'City Mall', 'Flamwood Walk Shopping Centre', 'Game Centre', 'Klerksdorp 01', 'MCC Superspar Centre', 'Pick n Pay Hypermarket', 'Songloed Shopping Centre', 'The Terminus');
  centres2[3] = new Array( 'BLA Lichtenburg Centre');

  cities1 = new Array( 'Brits', 'Klerksdorp', 'Lichtenburg', 'Mabopane', 'Mafikeng', 'Marikana', 'Mmabatho', 'Mogwase', 'Orkney', 'Phokeng', 'Potchesfstroom', 'Rustenburg', 'Sun City', 'Taung', 'Temba', 'Vryburg');
  cities2 = new Array( 'pew', 'pong', 'wong', 'Mabopane', 'Mafikeng', 'Marikana', 'Mmabatho', 'Mogwase', 'Orkney', 'Phokeng', 'Potchesfstroom', 'Rustenburg', 'Sun City', 'Taung', 'Temba', 'Vryburg');



function showHide(obj){
 var curSel = obj.options[obj.selectedIndex].value;

 switch(curSel)
 {
 case 'Free State':

  populateDropDown2(cities1, curSel);
  currentArray = '0';

   break;
 case 'Gauteng':

  populateDropDown2(cities2, curSel);
  currentArray = '1';

   break;
 case 'KZN':
   break;
 case 'Limpopo':
   break;
 case 'Mpumalanga':
   break;
 case 'North West':
   break;
 case 'Northern Cape':
   break;
 case 'Western Cape':
   break;
 default:
  $('#model').css({'display' : 'none'});
 }
}

function populateDropDown2(myArray, currentIndex)
{
   var x;
  $('#model').css({'display' : 'block'});

  $('#model').html("<select name='model' id='sub' onchange='showHideTwo(this);'>");
  for (var j=0; j<myArray.length; j++)
  {
   //populate the select with options
   $('#sub').append("<option value='" + j + "'>" + myArray[j] + "</option>");
  }  
}

function populateMalls(myNextArray, myNextIndex)
{
   var x;
  $('#browny').css({'display' : 'block'});

  $('#browny').html("<select name='browny' id='pie'>");
  for (var i=0; i<myNextArray[myNextIndex].length; i++)
  {
   //populate the select with options
   $('#pie').append("<option value='" + myNextArray[myNextIndex][i] + "'>" + myNextArray[myNextIndex][i] + "</option>");
  }  

}

function showHideTwo(obj) {
 var curSel = obj.options[obj.selectedIndex].value;


 switch(currentArray)
 {
 case '0':
  populateMalls(centres, curSel);
  $('#model').css({'display' : 'block'});

   break;
 case '1':
  populateMalls(centres2, curSel);
     break;

 default :

   break;

 }

}

            </script>

Any help would be greatly appreciated! thanx!

Also, the code might have a few syntax errors in since I have been working on it a while and I might have missed a few small things, so apologies in advance!

Answer 1

Looking at this…

//populate the select with options
$('#sub').append("<option value='" + j + "'>" + myArray[j] + "</option>");

my guess is that you need id=”sub1″, id=”sub2″ etc. for the sections you add. You didn’t include your HTML, but it seems that the elements in each section have the same ids.