Issue with multiple elements in a change function

I have two sections that will be displayed in my fiddle. The first section you chose a product (A or B). Then whenever you choose an option a next button is displayed. When you click next it takes you to the second section which shows the product selection.

I believe my issue resides within my change functions or if statements within it. Basically, I am unsure of what I am doing wrong with the code that starts with this:

  $('#package1', '#package2').on('change', function () {
        if ($('#package1' && '#package2').prop("checked")) {

I am wanting to format the second section (after the products were selected) different based on the selection. What I am struggling to do is if product A and B are both selected to only show the product A section #pg-review-section in the second section and hide the product B section #tp-selection.

Essentially, I am unsure of how to modify the code if both A and B are selected, but I want it to run off of a change function in case the selections change at any point.

Here is a fiddle for demonstration.

The code below is what I am struggling with.

$('#package1', '#package2').on('change', function () {
    if ($('#package1' && '#package2').prop("checked")) {
        $('#pg-review-section').show();
        $('#tp-review-section').show();
        $('#tp-selection').hide();
        $('#tp-selection').fadeBoolToggle($('#calendar-preview-select option:selected'));
    }
});
$('#package1').on('change', function () {
    if ($('#package1').prop("checked")) {
        $('#pg-selection').show();
        $('#pg-review-section').show();
        $('#tp-review-section').hide();
    } else {
        $('#pg-selection').hide();
    }
});
$('#package2').on('change', function () {
    if ($('#package2').prop("checked")) {
        $('#tp-selection').show();
        $('#tp-review-section').show();
        $('#pg-review-section').hide();
    } else {
        $('#tp-selection').hide();
    }
});