Roaming Destacado

np_javascript.js

   var npSElements = document.querySelectorAll('.np-s');

   npSElements.forEach(function(element) {
      var roam = element.querySelector('[data-modal="#movistar-roaming"]');
      var roamTxt = element.querySelector('[data-modal="#movistar-roaming"] p > em:last-of-type');
      var roamBox = element.querySelector('.np-s-content > a');

      if (roam !== null) {
         var npRoamingBox = document.createElement('span');
         npRoamingBox.className = 'np_roaming_box';
         npRoamingBox.innerHTML = '<span class="icon icon-roa"></span><span><em>Roaming:</em> ' + roamTxt.textContent + '</span>';
         roamBox.insertAdjacentElement('afterend', npRoamingBox);

         var roamBtn = element.querySelector('.np_roaming_box');
         var roamTrigger = element.querySelector('[data-modal="#movistar-roaming"]');

         if (roamBtn !== null) {
            roamBtn.addEventListener('click', function() {
               roamTrigger.click();
            });
         }
      }
   });

np_jquery.js

   jQuery('.np-s').each(function() {
      var roam = jQuery('[data-modal="#movistar-roaming"]', this).html();
      var roamtxt = jQuery('[data-modal="#movistar-roaming"] p> em:last-of-type', this).text();
      var roambox = jQuery('.np-s-content> a', this);
      if (roam !== undefined) {
         jQuery('<span class="np_roaming_box"><span class="icon icon-roa"></span><span><em>Roaming:</em> ' + roamtxt + '</span></span>').insertAfter(roambox);
      }
      var roambtn = jQuery('.np_roaming_box', this);
      var roamtrigger = jQuery('[data-modal="#movistar-roaming"]', this);
      jQuery(roambtn).click(function() {
         jQuery(roamtrigger).trigger('click');
      })
   });

np_style.css

  .np_roaming_box {
      display: flex;
      gap: 10px;
      padding: 10px 0;
      font-size: 14px;
      line-height: 130%;
      max-width: 210px;
      cursor: pointer;
      transition: color 0.2s ease-in-out;
   }

   .np_roaming_box:hover {
      color: #019df4;
   }

   [data-modal="#movistar-roaming"] {
      display: none !important;
   }

   @media (max-width: 991px) {
      .np_roaming_box {
         padding: 10px 0 0;
         max-width: unset;
         align-items: center;
      }
   }