onClick add/remove active class li items

Question

I've got the following script and it seems to work only 1 way:

initDownloadVersionSwitch: function() {
        $(document).on("click", ".download-version-list li:not(.active)", function() {
            var i = $(this),
                t = i.parent(),
                o = t.prev(".download-version-items"),
                n = i.index();
            t.find("li").removeClass("active"), i.addClass("active"), o.find("li").removeClass("active"), o.find("li:eq(" + n + ")").addClass("active")
        })
    },

It nicely adds/removes the active class to 'download-version-list' li's but only removes/adds the active class to the first 'download-version-items' li.

Any ideas where i go wrong?

Kind regards,

Marc

Per request:

<div class="row">
        <ul class="download-version-items grid grid-4-col">
            <?php foreach ($content->firmwares as $x => $item): ?>
                <li class="download-item<?php echo $x === 0 ? ' active' : ''; ?>">
                    <h3 class="thin"><?php echo $item['title']; ?></h3>
                    <small class="download-publication"><?php __("downloads.label.publication_date"); ?>: <?php echo $item['release_date']; ?></small>
                    <span class="download-text-title"><?php __("downloads.label.versionnumber"); ?>: <?php echo $item['version']; ?></span>
                    <div>
                        <?php echo $item['description']; ?>
                    </div>
                    <div class="center-button">
                      <a class="btn-license button gradient-button" href="<?php echo $item['file_url']; ?>"
                      <?php if ($item['license_enabled']){echo 'data-license="'.Router::url('/modalboxes/gnugpl/notice/firmware?uri='.$item['file_url']).'"';}; ?>
                      >
                          <span><?php __("downloads.firmware.button.download"); ?><small></small></span>
          </a>
                    </div>
                </li>
            <?php endforeach; ?>
        </ul>
        <ul class="download-version-list grid grid-4-col">
            <?php foreach ($content->firmwares as $x => $item): ?>
                <li class="<?php echo $x === 0 ? ' active' : ''; ?>">
                    <span class="download-version-title"><?php __("downloads.label.versionnumber"); ?> <?php echo $item['version']; ?></span>
                    <small><?php echo $item['release_date']; ?></small>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>

Pure HTML OUTPUT:

<div class="row active">
<ul class="download-version-items grid grid-4-col">
    <li class="download-item active">
        <h3 class="thin">Firmware 2.6</h3> <small class="download-publication">Publication date : 18 January 2016</small> <span class="download-text-title">Version number : 2.6</span>
        <div>
            <p><strong>Changed:</strong></p>
            <ol>
                <li class="">Add timeout to check DNS alive</li>
                <li class="">Add procedure to verify ipv4 and ipv6 on ppp session</li>
            </ol>
            <p><strong>Fixed:</strong></p>
            <ol>
                <li>Fix security issue of NetUSB</li>
                <li>Fixed Apple iOS 9 login issue with the MyWiFi app.</li>
            </ol>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2747"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
    <li class="download-item">
        <h3 class="thin">Firmware 2.4</h3> <small class="download-publication">Publication date : 11 November 2015</small> <span class="download-text-title">Version number : 2.4</span>
        <div>
            <p>Show the information of guest network clients on DHCP Status page</p>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/2658"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
    <li class="download-item">
        <h3 class="thin">Firmware 2.1</h3> <small class="download-publication">Publication date : 19 February 2015</small> <span class="download-text-title">Version number : 2.1</span>
        <div>
            <p>WLR-8100v1-001</p>
            <p>Firmware 2.1
                <br> (1) &nbsp; &nbsp;Added support for Mobile App</p>
            <p>Firmware 1.5
                <br> (1) &nbsp; &nbsp;Modified DHCP Client list table
                <br> (2) &nbsp; &nbsp;Allow Manual DNS Servers on WAN side</p>
            <p>Firmware 1.3
                <br> (1) &nbsp; &nbsp;Add Apple AirPrint support</p>
            <p>Firmware 1.2
                <br> (1) &nbsp; &nbsp;DLNA server now supports 10000 files instead of 1000
                <br> (2) &nbsp; &nbsp;Fixed some WPS PIN code issues
                <br> (3) &nbsp; &nbsp;Improved Samba server compatibitity</p>
            <p>Firmware 1.0&nbsp;
                <br> The first official released firmware for WLR-8100.</p>
        </div>
        <div class="center-button">
            <a class="btn-license button gradient-button" href="http://domain.com/download/firmware/611" data-license="http://domain.com/modalboxes/gnugpl/notice/firmware?uri=http://domain.com/download/firmware/611"> <span>Download firmware <small></small></span> </a>
        </div>
    </li>
</ul>
<ul class="download-version-list grid grid-4-col">
    <li class="active"> <span class="download-version-title">Version number 2.6</span> <small>18 January 2016</small> </li>
    <li class=""> <span class="download-version-title">Version number 2.4</span> <small>11 November 2015</small> </li>
    <li class=""><span class="download-version-title">Version number 2.1</span> <small>19 February 2015</small> </li>
</ul>

Answer 1

Your code isn't working because when you select the second li element in download-version-list, the next li item in download-version-items is this.

<li class="">Add timeout to check DNS alive</li>

If you select li's not in ol's, it will work

o.find('li').not('ol li').eq(n).addClass("active")

https://jsfiddle.net/wLfyfjra/1/

Note: It would be better and more reliable to specify classes here rather than html elements, because you have a lot of content/html elements in the li's here, which would prevent something like this happening in the future