Благодаря DanKud получил то, что нужно, ну и спасибо за помощь еще wagoodoogoo
Нужно было просто вещать событие .on(focus), а wago же подсказал то, как убрать уже когда верно введено все! Спасибо , рябят!
1)

$('.input_form').on('focus', function() {
/* либо если вешать на клик:
$('.input_form').on('click', function() { */
    $(this).removeClass('error');
    $('#test').hide();
});

2)

if (pattern.test($(this).val())) {
        $(this).removeClass("error");
        $("#test").fadeOut(600).css({ display: "none" }).text("");
      }

Решение: перейти на svg и поместить стили в head. Спасибо за помощь Dymok

Спасибо за наводку Дмитрий совсем что-то вылетило из головы перекрытие.
В любом случае вот исправленый код:

<div class="notifications-social-icq-do">
                  <p class="notifications-social-icq-do-p p1">1. Скопируйте команду авторизации</p>
                    <div class="notifications-social-icq-do-icon_1">
                      <button><i class="material-icons">content_copy</i></button>
                    </div>
                  <p class="notifications-social-icq-do-p">2. Перейдите в чат и отправьте команду боту</p>
                    <div class="notifications-social-icq-do-icon_2">
                      <button><i class="material-icons">content_copy</i></button>
                    </div>

.notifications-social-skype-do-p {
    margin-top: 23px;
    width: 190px;
    height: 30px;
    display: flex;
    font-size: 14px;
    color: #2C2C2C;
}

.notifications-social-skype-do i {
    color: #BBBEC9;
}

.notifications-social-skype-do i:hover {
    color: #687189;
}

.notifications-social-skype-do button {
    border: none;
    background: #f4f4f6;
}

.notifications-social-skype-do-icon_1 {
    position: absolute;
    padding-left: 200px;
    margin-top: 25px;
}

.notifications-social-skype-do-icon_2 {
    padding-left: 200px;
    padding-bottom: 150px;
}