Blur function on all posts

Question

The HTML code is

{{> addPost}}

    {{#each post}}
        {{> postItem}}

    {{/each}}
</template>

<template name="postItem" >

    <div class='container'>

    <div class='col-lg-9'>
    <div class='well'>
    <span id='blur'>
    <h4><img src='{{userImage}}' class='img-responsive img-circle pull-left' height='100' width='100'/>{{name}}</h4>
    <i>Asked by {{postedBy}} on {{createdAt}}</i>
    </span>
    </div>
    </div>

And the Javascript code is: Here myinput is the id of the textbox where user can post.

'mouseover #myinput':function(event){
            event.preventDefault;
            var containerElement = document.getElementById('blur');
            containerElement.setAttribute('class', 'blur');
        },
        'mouseout #myinput':function(event){
            event.preventDefault;
            var containerElement = document.getElementById('blur');
            containerElement.setAttribute('class', null);
        }

And the CSS code is:

.blur   {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

But on hovering over the textbox with id 'myinput' the blur background only appears over the first post.Rest of the post does not show blurred background. Please help.

Answer 1

Use document.querySelectorAll('#blur') to get all #blur elements, with document.getElementById() you get the first element with id #blur

or use jQuery if you want.