Вопрос такой. Есть множество спелектов.... Нужно взять данные из конкретного селекта и добавить это значение в массив

Есть такая генерируемая форма, в ней есть селект.

$sql = "SELECT * FROM `products` WHERE `prod_type`='Canopy'";
    $result = $pdo->query($sql);
    while ($row = $result->fetch()) {
        $CanopyName = $row['prod_name'];
        $Canopy = '<div class="Product">';
        $Canopy .= '<H1>'.$CanopyName.'</H1>';
        $Canopy .= '<p><b> Class - '.$row['Canopy_class'].'</b></p>';
        $Canopy .= '<p><b>Cost: ' .$row['prod_cost'].'</b></p>';
        $Canopy .= '<img class="img" src="'.$row['prod_img'].'">';
        $Canopy .= '<select id="CanopySize">';
                $sqlSize = "SELECT `Canopy_Size` FROM `canopy_size` WHERE `Canopy_name` = '$CanopyName'";
                $resultSize = $pdo->query($sqlSize);
                $Canopy .= '<option>--Выберите размер--</option>';
                    while ($rowSize = $resultSize->fetch()) {
                        $Canopy .= '<option value="'.$rowSize['Canopy_Size'].'">';
                        $Canopy .=  $rowSize['Canopy_Size'].'</option>';
                    }
                    $Canopy .= '</select>';
        $Canopy .= '<button class="add1" data-id="'.$row['product_ID'].'">Добавить</button>';
        $Canopy .= '</div>';
     echo $Canopy;
    }

Все работает и все гуд..

на кнопке висит событие добавить товар в корзину.

function addToCart1() {
    //Добавляем товар в корзтну

    var id = $(this).attr('data-id');
    cart[id] = 1;

    localStorage.setItem('cart', JSON.stringify(cart));
    alert('Основной парашют добавлен. Выберите ранец.');
    console.log(cart);
}

Вопрос в том как теперь добавить к этому событию еще и данные селекта, а точнее конкретного селекта, так как их там много.