Hellp with Jquery Argument / Statement

Hellp with Jquery Argument / Statement

I have a custom piece of script that i am trying to modify. The function of this is to display a Pricing Table. One product may have hundreds of pricing tables depending on what attributes are chosen. As it stands, it will only show one at a time and only if attributes are selected.

  1. /**
  2.  * VARIABLE PRODUCT PRICING TABLE
  3.  */
  4. function rp_wcdpd_switch_variable_pricing_tables(element_id) {
  5.     jQuery('.rp_wcdpd_pricing_table_variation').hide();
  6.     jQuery(element_id).show();
  7. }
  8. if (jQuery('.rp_wcdpd_pricing_table_variation').length) {
  9.     jQuery('input:hidden[name="variation_id"]').each(function() {
  10.         rp_wcdpd_switch_variable_pricing_tables('#rp_wcdpd_pricing_table_variation_' + jQuery(this).val());
  11.         jQuery(this).change(function() {
  12.             rp_wcdpd_switch_variable_pricing_tables('#rp_wcdpd_pricing_table_variation_' + jQuery(this).val());
  13.         });
  14.     });
  15. }

I then modofied this to allow the first pricing table to display before anything is selected. This works, but the problem is that when a user selects an attribute is shows two tables instead of the attribute table replacing the first default table.

This is what was added to show the first table as default.

  1. jQuery('.rp_wcdpd_pricing_table_variation').first().show();

So my question is how can i write this so that the default (First table is hidden only when an attribute is selected) and replaced by the new table of that attribute.