<!DOCTYPE HTML>
<html>
<head> <style>
.red {
background-color:red;
}
</style></head>
<body>
<div id='parent'>
<div id="out_txt_1" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_2" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_3" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_4" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_5" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_6" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_7" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_8" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_9" class="happyend" contenteditable="true">текст</div>
<div id="out_txt_10" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_11" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_12" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_13" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_14" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_15" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_16" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_17" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_18" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_19" class="inviz" contenteditable="true">текст</div>
<div id="out_txt_20" class="inviz" contenteditable="true">текст</div>
</div>
<script>
!function () {
var elem = document.getElementById('parent');
var child = elem.getElementsByClassName('inviz');
var leng = child.length;
var i = 0;
elem.onclick = function (e) {
if (i >= leng) return;
child[i].className = 'inviz red';
i++;
}
}();
</script>
</body>
</html>