Jio Recharges Scraper - 1

document.addEventListener("click", function() {
  // Cleanup existing elements
  document.querySelectorAll('[class^="PlanName_planText__"] div span').forEach((e) => e.remove());

  // Select all plan cards
  const planCards = document.querySelectorAll('.Details_planCardBody__2J7AF');
  const plans = [];

  // Collect plan data
  planCards.forEach((planContainer) => {
    const priceElement = planContainer.querySelector('.PlanName_planText__3e7m1 div');
    const validityElement = planContainer.querySelector('.ValidityCol_gridItem__2kXe3 div.j-text.j-text-body-xxs-bold span');

    const price = parseInt(priceElement.textContent.trim(), 10);
    const validityDays = parseInt(validityElement.textContent.trim().split(' ')[0], 10);
    const pricePerDay = price / validityDays;

    plans.push({
      price,
      validityDays,
      pricePerDay,
      element: planContainer.cloneNode(true) // Clone original element
    });
  });

  // Sort plans by pricePerDay (ascending)
  plans.sort((a, b) => a.pricePerDay - b.pricePerDay);

  // Create results container
  const resultsContainer = document.createElement('div');
  resultsContainer.style.marginTop = '20px';
  resultsContainer.innerHTML = '';
  resultsContainer.style.width = '100%';

  // Create sorted list
  const listContainer = document.createElement('div');
  plans.forEach(plan => {
    const planItem = document.createElement('div');
    planItem.style.padding = '10px';
    planItem.style.borderBottom = '1px solid #eee';
    planItem.style.width = '400px';
    planItem.innerHTML = `
      <div style="display: flex; justify-content: space-between;">
        <div class="price">₹${plan.price} (${plan.validityDays} days)</div>
        <div class="price-per-day">₹${plan.pricePerDay.toFixed(2)}/day</div>
      </div>
    `;
    listContainer.appendChild(planItem);
  });

  // Update headingCategory div
  const headingDiv = document.querySelector('#headingCategory');
  headingDiv.innerHTML = ''; // Clear previous content
  resultsContainer.innerHTML = '';
  resultsContainer.appendChild(listContainer);
  headingDiv.appendChild(resultsContainer);
});