List class element(index).fadetoggle(some speed) not working

I have 2 lists of class items

var listEditCommitLinks = document.getElementsByClassName('edit-comment-link');
var listEditCommitWrappers = document.getElementsByClassName('edit-commit-wrapper');

links and wrappers

<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" class="edit-commit-link">Edit</a>
<div class="edit-commit-wrapper">
 ..
</div>

style

.edit-commit-wrapper {
  display: none;
}

On default each wrapper is hidden, and should fadetoggle on a link click (with the same list index nr)

But for some reason this isn't working out for me. The js for running through the list:

for (var i = 0; i < listEditCommitLinks.length; i++) {

    listEditCommitLinks[i].onclick = function () {
        listEditCommitWrappers[i].fadeToggle(200);
    }
}

Error:

Uncaught TypeError: listEditCommitWrappers[i].fadeToggle is not a function

Added

how the divs look like

Is there a way to fix this? A jQuery solution is also good (I tried this before js but wasn't working out either). Thanks

Problem is, fadeToggle is a jQuery instance method and the items in listEditCommitWrappers are not jQuery objects. How about...

jQuery(function($) {
    $('.edit-commit-link').on('click', function(e) {
        e.preventDefault();
        $(this).next('.edit-commit-wrapper').fadeToggle(200);
    });
});

See https://api.jquery.com/next/

Working jsFiddle ~ http://jsfiddle.net/t4nh85cm/

To make it work with your pastebin HTML, you could try something like this although I feel it's getting messy

$(this).closest('.row').next('.edit-commit-wrapper').fadeToggle(200);

See https://api.jquery.com/closest/