title: Replace URL using JS in menu only inside li with certain class on mobile
body: <p>I have a menu like this on my WordPress site:</p>
  <pre><code>&lt;ul id=&quot;menu-main-menu&quot; class=&quot;clearfix&quot;&gt;&lt;li id=&quot;menu-item-397&quot; class=&quot;menu-item-397&quot;&gt;&lt;a href=&quot;https://www.my_url.com/o-nas/&quot;&gt;About us&lt;/a&gt;&lt;/li&gt;
  &lt;li id=&quot;menu-item-1001&quot; class=&quot;menu-item-object-custom menu-item-has-children has-dropdown menu-item-1001&quot;&gt;&lt;a href=&quot;https://www.my_url.com/oferta/&quot;&gt;OFFER&lt;/a&gt;
  &lt;ul class=&quot;nav-dropdown&quot;&gt;
      &lt;li id=&quot;menu-item-454&quot; class=&quot;not_on_mobile menu-item-has-children has-dropdown menu-item-454&quot;&gt;&lt;a href=&quot;https://www.my_url.com/ginekolog-poznan-suchy-las/&quot;&gt;PROBLEM&lt;/a&gt;
      &lt;ul class=&quot;nav-dropdown&quot;&gt;
          &lt;li id=&quot;menu-item-1569&quot; class=&quot;menu-item-1569&quot;&gt;&lt;a href=&quot;https://www.my_url.com/prowadzenie-ciazy-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&quot;menu-item-1572&quot; class=&quot;menu-item-1572&quot;&gt;&lt;a href=&quot;https://www.my_url.com/usg-ciazy-3d-4d-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li id=&quot;menu-item-1063&quot; class=&quot;not_on_mobile menu-item-has-children has-dropdown menu-item-1063&quot;&gt;&lt;a href=&quot;https://www.my_url.com/ginekologia-estetyczna-poznan/&quot;&gt;PROBLEM&lt;/a&gt;
      &lt;ul class=&quot;nav-dropdown&quot;&gt;
          &lt;li id=&quot;menu-item-1242&quot; class=&quot;menu-item-1242&quot;&gt;&lt;a href=&quot;https://www.my_url.com/labioplastyka-laserowa-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&quot;menu-item-1243&quot; class=&quot;menu-item-1243&quot;&gt;&lt;a href=&quot;https://www.my_url.com/wysilkowe-nietrzymanie-moczu-leczenie-laserem-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li id=&quot;menu-item-508&quot; class=&quot;not_on_mobile menu-item-has-children has-dropdown menu-item-508&quot;&gt;&lt;a href=&quot;https://www.my_url.com/stomatologia-suchy-las-dentystyka/&quot;&gt;PROBLEM&lt;/a&gt;
      &lt;ul class=&quot;nav-dropdown&quot;&gt;
          &lt;li id=&quot;menu-item-670&quot; class=&quot;menu-item-670&quot;&gt;&lt;a href=&quot;https://www.my_url.com/chirurg-stomatolog-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&quot;menu-item-1133&quot; class=&quot;menu-item-1133&quot;&gt;&lt;a href=&quot;https://www.my_url.com/stomatolog-dzieciecy-suchy-las/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;li id=&quot;menu-item-1427&quot; class=&quot;menu-item-1427&quot;&gt;&lt;a href=&quot;https://www.my_url.com/wybielanie-zebow-lampa-nakladkowe-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li id=&quot;menu-item-673&quot; class=&quot;menu-item-673&quot;&gt;&lt;a href=&quot;https://www.my_url.com/ortodonta-suchy-las/&quot;&gt;Ortodoncja&lt;/a&gt;&lt;/li&gt;
      &lt;li id=&quot;menu-item-443&quot; class=&quot;not_on_mobile menu-item-object-custom menu-item-has-children has-dropdown menu-item-443&quot;&gt;&lt;a href=&quot;https://www.my_url.com/radiolog-poznan/&quot;&gt;PROBLEM&lt;/a&gt;
      &lt;ul class=&quot;nav-dropdown&quot;&gt;
          &lt;li id=&quot;menu-item-1820&quot; class=&quot;menu-item-1820&quot;&gt;&lt;a href=&quot;https://www.my_url.com/usg-jamy-brzusznej/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
      &lt;li id=&quot;menu-item-1160&quot; class=&quot;menu-item-object-custom menu-item-1160&quot;&gt;&lt;a href=&quot;https://www.my_url.com/endokrynolog-poznan/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
      &lt;li id=&quot;menu-item-741&quot; class=&quot;menu-item-741&quot;&gt;&lt;a href=&quot;https://www.my_url.com/medycyna-estetyczna-suchy-las/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li id=&quot;menu-item-523&quot; class=&quot;menu-item-523&quot;&gt;&lt;a href=&quot;https://www.my_url.com/cennik-uslug/&quot;&gt;Test&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>The problem is that on mobile, when I click on elements that I called PROBLEM, the URL is triggered and it expands another level of menu but in the same time enters an url I just clicked.
  I thought that the fix for this could be to replace this PROBLEM URL's by a link like #menu_on_mobile
  All of those PROBLEM url's are the first 'a' items in li which has a 'not_on_mobile' class.</p>
  <p>I tried to do it like this:</p>
  <pre><code>document.querySelectorAll(&quot;.not_on_mobile a:first-child&quot;).forEach(a =&gt; a.setAttribute('href', '#menu_on_mobile'));
  </code></pre>
  <p>But the problem is that it replaces URL in all 'a' element in not_on_mobile class.</p>
  <p>How to edit it to replace only the first element in 'li' and work only on mobile?</p>