W3C Validation - Attribute buttonindex not allowed on element a at this point

Question

I getting the error "Attribute buttonindex not allowed on element a at this point". My code is

<p><a class="btn btn-success_ar hidden-xs" id="indexCarouselBeforeBtn2" buttonindex="2" role="button">HOVER HERE TO SEE BEFORE</a></p>

and my Script is

<script type="text/javascript" >
var imageList = [];

$(document).ready(function(){

    var totalSlides = 5;
    for (var i = 1; i <= totalSlides; i++) {

        imageList[i] = [];

        imageList[i][0] = $('<img />').attr('src', 'after/images/external/index' + i + 'after.jpg').attr('id', 'indexCarouselImg' + i);
        imageList[i][1] = $('<img />').attr('src', 'after/images/external/index' + i + 'before.jpg').attr('id', 'indexCarouselImg' + i);


        $("#indexCarouselBeforeBtn" + i).mouseenter(function(){

            $("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
            $("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][1]);
            $(this).addClass('btnHover');
        });

        $("#indexCarouselBeforeBtn" + i).mouseleave(function(){

            $("#indexCarouselImg" + $(this).attr('buttonindex')).remove();
            $("#item" + $(this).attr('buttonindex')).append(imageList[$(this).attr('buttonindex')][0]);
            $(this).removeClass('btnHover');
        });

        $("#indexCarouselImg" + i).remove();
        $("#item" + i).append(imageList[i][0]);
    }
});

The error still exists even using P and Div tags instead of the a tag . How can I fix this.

Answer 1

I think that's attribute not exists in HTML.

You can use tabindex.

https://www.w3schools.com/tags/att_global_tabindex.asp