Why can't I use more than 3 viewport interactions?

$w . onReady ( function () {

});

export function servicelist_viewportEnter ( event ) {
$w ( ‘#dpurple’ ). show ( ‘fade’ );
}
export function servicelist_viewportLeave ( event ) {
$w ( ‘#dpurple’ ). hide ( ‘fade’ );
}
export function gallery1_viewportEnter ( event ) {
$w ( ‘#purple’ ). show ( ‘fade’ );
}
export function gallery1_viewportLeave ( event ) {
$w ( ‘#purple’ ). hide ( ‘fade’ );
}
export function quotebox_viewportEnter ( event ) {
$w ( ‘#wine’ ). show ( ‘fade’ );
}
export function quotebox_viewportLeave ( event ) {
$w ( ‘#wine’ ). hide ( ‘fade’ );
}
export function otrig_viewportEnter ( event ) {
$w ( ‘#orange’ ). show ( ‘fade’ );
}
export function otrig_viewportLeave ( event ) {
$w ( ‘#orange’ ). hide ( ‘fade’ );
}

dpurple, purple, wine, and orange are containers the size of the page with a default state of being hidden. They have different colors and will should fade in and out on entry and exit of the viewport by different triggering elements. servicelist, gallery1, quotebox, and otrig