How to use divs as radio button and save data from inside the selected div to valiables using javascrip?

Question

I have multiple divs in my HTML with sample class name and I want these divs to behave like a radio button, that is when a div is clicked / selected, I want to achieve following. 1: Change the selected div background color 2: Get values from different elements those are inside the selected div and save the values in variables. I am able to change the color but I am not able to get the unique values from inside the selected div. Here is the HTML

 <div class="col-lg-4 text-center">
                    <div class="package">
                        <input type="hidden" class="packageId" value="5" />
                        <p class="small">Deep</p>
                        <h4 class="packageTitle">Deep Cleaning</h4>
                        <p>All-inclusive cleaning service</p>
                        <p class="small">Price Per Cleaner</p>
                        <p class="price packagePrice">41.90 <span class="small">/h</span></p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="package">
                        <input type="hidden" class="packageId" value="4" />
                        <p class="small">Last Minute</p>
                        <h4 class="packageTitle">Last-Minute Cleaning</h4>
                        <p>Last minute &amp; after party cleaning</p>
                        <p class="small">Price Per Cleaner</p>
                        <p class="price packagePrice">43.90 <span class="small">/h</span></p>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <div class="package">
                        <input type="hidden" class="packageId" value="3" />
                        <p class="small">Moving</p>
                        <h4 class="packageTitle">Move-In-Out Cleaning</h4>
                        <p>For move-ins, and move-outs</p>
                        <p class="small">Price Per Cleaner</p>
                        <p class="price packagePrice">41.90 <span class="small">/h</span></p>
                    </div>
                </div>

And here the the Script

    var packageId = "";
    var packageTitle = "";
    var packagePrice = "";
    var packages = document.getElementsByClassName('package');
    Array.prototype.forEach.call(packages, function (element) {
        element.addEventListener('click', function () {
            $('.package').css("background-color", "#FFFFFF");
            $(this).css("background-color", "#FCF6CC");
            packageId = $('.packageId').attr('value');
            packageTitle = $('.packageTitle').text();
            packagePrice = $('packagePrice').text();
            console.log(packageId);
            console.log(packageTitle);
            console.log(packagePrice);
        });
    });

Answer 1

The reason that youre not getiing the unique value is because you are using get element by class,

ie packagePrice = $('.packagePrice').text();

and there are 3 elements with same class name, to fix this issue

  const elem = $(this);
  packagePrice = elem.find('.packagePrice').text();