I'm looking to get multiple choose inputs working nicely together and battling. I've got a setup where these fields: Title, Country, Condition could be repeated. Condition and Country are choose inputs and that i want the condition to show in line with the country selected. I've it working okay if there's only one demonstration of the fields. Its where I've two or more instance, it falls apart.

I'm using WordPress and WPAlchemy to produce the fields inside a custom meta box.

<div class="my_meta_control">
<?php while($mb->have_fields_and_multi('info')): ?>
<?php $mb->the_group_open(); ?>

  <?php $mb->the_field('s_single'); ?>
    <select class="country" name="<?php $mb->the_name(); ?>">
      <option value="">Select...</option>
      <option value="a1"<?php $mb->the_select_state('a1'); ?>>Canada</option>
      <option value="a2"<?php $mb->the_select_state('a2'); ?>>USA</option>
       etc....
    </select>

  <?php $mb->the_field('s_single2'); ?>
    <select class="canada" name="<?php $mb->the_name(); ?>">
      <option value="">Select...</option>
      <option value="a1"<?php $mb->the_select_state('a1'); ?>>Ontario</option>
       etc....
    </select>

  <?php $mb->the_field('s_single3'); ?>
    <select class="usa" name="<?php $mb->the_name(); ?>">
      <option value="">Select...</option>
      <option value="a1"<?php $mb->the_select_state('a1'); ?>>California</option>
       etc....
    </select>
<?php $mb->the_group_close(); ?>

  <a href="#" class="docopy-info button">Add Row</a>
  <a href="#" class="dodelete-info button">Remove Row</a>

</div>

I'm using jQuery to exhibit and hide the attached condition choose inputs according to country selected.

jQuery(document).ready(function () {
  jQuery(".canada, .usa").hide();
  jQuery(".country").trigger("change");
});

jQuery(".country").change(function () {
  if (jQuery(".country").val() == 'c3') {
    jQuery(".usa").hide();
    jQuery(".canada").show();
  } else if (jQuery(".country").val() == 'u6') {
    jQuery(".canada").hide();
    jQuery(".usa").show();
  } else {
    jQuery(".canada").hide();
    jQuery(".usa").hide();    
  }
});

After I choose a Canada within the first row of inputs, it affects all rows of inputs below. It'll only show the canadian provinces despite choosing USA. Any assistance is much appreciated.

-Lee