Difference between index and data in JavaScript?

It's a bit hard to know what's going on event.data.x methods.

Would you tell me what's event.data.x exactly refers below this code?

I mostly understood how the code works such as function stuctures, parameters, methods except this function(event) part.

Is it the number of function that has parameter named event?

It would be great if you explain those using easy words.

plus: Is there any difference between index and data at Jquery??

<script src="http://code.jquery.com/jquery-3.3.1.js"></script>

$(document).ready(function(){
    $("p").each(function(i){
        $(this).on("click", {x:i}, function(event){
            alert("The " + $(this).index() + ". paragraph has data: " + event.data.x);
        });
    });
});

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>