Replacing a class on multiple pages with Optimizely

Question

I'm trying to set up an A/B test using Optimizely to change the color of the add to cart button on all product pages on the site.

Here's the current code on the site

<input id="id-for-test" class="add_to_cart_list" value="Add to Cart" name="Add to Cart" type="button"
                                                    onclick='sendToDataLayer("Category Lower", "Add to cart");return cat_add_one_to_cart( "<?= $p["id"] ?>", "<?= $param_sku ?>", "<?= $output_price ?>", "<?= $path ?>", "<?= $can_buy_limit ?>" ,"<?=$this_page_type?>")'/>

I'm adding this in the Optimizely code editor and it's not working

$('#id-for-test').removeClass('add_to_cart_list').addClass('color-test');

Answer 1

Give each cart input element a common class such as cart-class:

<input id="id-for-test" class="cart-class add_to_cart_list" value="Add to Cart" name="Add to Cart" type="button"
    onclick='sendToDataLayer("Category Lower", "Add to cart");return cat_add_one_to_cart( "<?= $p["id"] ?>", "<?= $param_sku ?>", "<?= $output_price ?>", "<?= $path ?>", "<?= $can_buy_limit ?>" ,"<?=$this_page_type?>")'/>

Then query based on class instead of ID:

$('.cart-class').removeClass('add_to_cart_list').addClass('color-test');

IDs are supposed to be unique, so the query just stops looking after it finds it's first instance. Use a class so it applies the change to all instances.