Корректный код:
$(".input_has-clear").append("<i class='input__clear'>x</i>");
// Ставим обработчик на событие изменения поля
$('.input__control').on('change', function () {
// Находим родительский блок
$(this).closest('.input_has-clear')
// в родительском блоке находим нужный элемент
.find(".input__clear")
// скрываем или показываем элемент в зависимости от заполненности поля
// обратите внимание, что toggleClass вторым аргументом принимает чисто булевое значение
// поэтому при помощи двойного отрицания приводим строку к нему
// если она пустая - будет false и класс уберется, иначе - добавится
.toggleClass("input__clear_visible", !!$(this).val());
});
jsfiddle.net/koceg/j40vquoo
В вашем коде очень многое неверно:
$(function() {
$(".input_has-clear").append("<i class='input__clear'>");
// 1. Этот код выполнится один раз при загрузке страницы,
// вам же, наверняка, нужно, чтобы элемент скрывался или показывался
// динамически по мере редактирования поля
// 2. .input_has-clear - это span, у него нет value
if($(".input_has-clear").val() != "") {
// Логика определения скрытия и показа класса неверная
// Если повесить на поле обработчик, то при вводе каждой буквы
// Элемент будет то скрываться, то показываться
$(this).find(".input__clear").toggleClass("input__clear_visible");
}
});
P.S.
цикл выполняться не хочет
В вашем коде нет ни одного цикла.