Hers one way to do it…
function draftSave() {
var one = ""
document.querySelectorAll('#one > textarea').forEach(el => {
one += el.value;
})
var two = ""
document.querySelectorAll('#two > textarea').forEach(el => {
two += el.value;
})
if (one !== "" && two !== "") {
console.clear();
console.log("alert both rows are filled")
}else {
console.clear();
console.log("submited: " + one + two);
}
}
<div id="one">row1
<textarea rows="2" class="form-control checking-length" name="text1" id="text1" required maxlength="3500" placeholder="Your answer.."></textarea>
<textarea rows="2" class="form-control checking-length" name="text2" id="text2" required maxlength="3500" placeholder="Your answer.."></textarea>
</div>
<div id="two">row2
<textarea rows="2" class="form-control checking-length" name="div2_text1" id="div2_text1" required maxlength="3500" placeholder="Your answer.."></textarea>
<textarea rows="2" class="form-control checking-length" name="div2_text2" id="div2_text2" required maxlength="3500" placeholder="Your answer.."></textarea>
</div>
<a class="btn btn-info waves-effect" name="step5" id="step5" onclick="draftSave()">Draft Save</a>