Байт,
$(".sel") это элемент/ы на момент загрузки страницы, jquery не телепат, она не следит в этом случае, какие элементы ещё возникнут с этим классом
sel в дальнейшем.
если вам нужно отследить клики на любых элементах с данным классом, тогда обработчик события ставят на родителя( делегирование) , пример ниже, и в родителе проверяют класс элемента который был нажат.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.unsel {
background-color: #ffffff;
cursor: pointer;
}
.sel {
background-color: #9999ff;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("body").on("click", ".unsel, .sel", function() {
$(this).toggleClass('unsel sel');
})
});
</script>
</head>
<body>
<span class='sel It'> Солнце </span><br>
<span class='unsel It'> Луна </span><br>
<span class='unsel It'> Меркурий</span><br>
</body>
</html>