El problema es el .parents()
que devuelve una lista con todos los padres.
Con el siguiente snippet se puede ver el problema, se colorean los hermanos de esos .parents()
cuando solo te interesa que se coloreen los que están a su nivel.
$("button").click(function(){
$(".row").css("background-color","white")
console.log("Parent ID:"+$(this).parent('.row').attr("id"));
$(this).parents(".row").siblings('.row').css("background-color","yellow")
});
.row {
width: 100%;
border: 1px solid black;
}
.row > .row {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="song" class="row">
Grupo 1
<div id="desc" class="row">
Hermano - grupo 1
</div>
<div id="votes" class="row">
Hermano - grupo 1
<button>
CLICK
</button>
</div>
</div>
<div id="song2" class="row">
Grupo 2
<div id="desc2" class="row">
Hermano - grupo 2
</div>
<div id="votes2" class="row">
Hermano - grupo 2
<button>
CLICK
</button>
</div>
</div>
En tu caso tienes varios padres que coinciden con que tienen la clase .row
Por lo que para moverte hasta el punto que quieres lo podrías hacer concatenando varios .parent()
var cancion = $(this).parent().parent().siblings('.row').find('.cancion').html();