How to add multiple like and dislike buttons in a webpage?

I am having a page in which I am showing the like and dislike button in a particular div , it is working quite good for one like and dislike button but not for ,multiples.
Here is the code :
` <script>var btn1 = document.querySelector(‘.green’);
var btn2 = document.querySelector(‘.red’);
btn1.addEventListener(‘click’, function() {
if (btn2.classList.contains(‘red1’)) {
btn2.classList.remove(‘red1’);
}
this.classList.toggle(‘green1’);
});
btn2.addEventListener(‘click’, function() {
if (btn1.classList.contains(‘green1’)) {
btn1.classList.remove(‘green1’);
}
this.classList.toggle(‘red1’);
});
</script>
<style>
.btn{
cursor: pointer;
outline: 0;
color: #AAA;
padding:5px 10px;margin-bottom:0;background-color:rgb(240, 240, 240);
}
.btn i{font-size:16px;}
.btn:focus {background:transparent;}
.btn.green1{color: green;}
.green1{color: green;}
.btn.red1{ color: red;}
</style>
<div>
<button class=”btn green”><i class=”fa fa-thumbs-up fa-lg” aria-hidden=”true”></i></button>
<button class=”btn red”><i class=”fa fa-thumbs-down fa-lg” aria-hidden=”true”></i></button>
</div>
<div>
<button class=”btn green”><i class=”fa fa-thumbs-up fa-lg” aria-hidden=”true”></i></button>
<button class=”btn red”><i class=”fa fa-thumbs-down fa-lg” aria-hidden=”true”></i></button>
</div>`

Also in #JavaScript _↴