diff --git a/css/telephone_international_widget.css b/css/telephone_international_widget.css
index 7bf9f11..087df11 100644
--- a/css/telephone_international_widget.css
+++ b/css/telephone_international_widget.css
@@ -1,8 +1,11 @@
-.field--widget-telephone-international #valid-msg {
+.field--widget-telephone-international .valid-msg {
   margin-left: 5px;
   color: #00C900;
 }
-.field--widget-telephone-international #error-msg {
+.field--widget-telephone-international .error-msg {
   margin-left: 5px;
   color: red;
-}
\ No newline at end of file
+}
+.field--widget-telephone-international .hide {
+  display: none;
+}
diff --git a/js/telephone_international_widget.js b/js/telephone_international_widget.js
index 84eb786..ef8b40a 100644
--- a/js/telephone_international_widget.js
+++ b/js/telephone_international_widget.js
@@ -1,48 +1,76 @@
 (function () {
-  "use strict";
+  'use strict'
 
   Drupal.behaviors.telephone_international_widget = {
     attach: function (context, settings) {
-      var input = document.querySelector(".telephone_international_widget"),
-          errorMsg = document.querySelector("#error-msg"),
-          validMsg = document.querySelector("#valid-msg");
+      let inputs = document.querySelectorAll('.telephone_international_widget')
 
       // Index the error code returned from getValidationError.
-      var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
-
-      var iti = window.intlTelInput(input, {
-        hiddenInput: "full_phone",
-        utilsScript: "/libraries/intl-tel-input/build/js/utils.js"
-      });
-
-      var reset = function() {
-        input.classList.remove("error");
-        errorMsg.innerHTML = "";
-        errorMsg.classList.add("hide");
-        validMsg.classList.add("hide");
-      };
-
-      // Validate on blur.
-      input.addEventListener("blur", function() {
-        reset();
-        if (input.value.trim()) {
-          if (iti.isValidNumber()) {
-            validMsg.classList.remove("hide");
-            input.value = iti.getNumber();
-          } else {
-            input.classList.add("error");
-            var errorCode = iti.getValidationError();
-            errorMsg.innerHTML = errorMap[errorCode];
-            errorMsg.classList.remove("hide");
+      let errorMap = ['Invalid number', 'Invalid country code', 'Too short', 'Too long', 'Invalid number']
+
+      inputs.forEach(input => {
+        let iti = window.intlTelInput(input, {
+          hiddenInput: 'full_phone',
+          utilsScript: '/libraries/intl-tel-input/build/js/utils.js'
+        })
+
+        let errorMsg = input.closest('.form-item').querySelector('.error-msg'),
+          validMsg = input.closest('.form-item').querySelector('.valid-msg')
+
+        // Clean error messages.
+        let reset = function () {
+          input.classList.remove('error')
+          errorMsg.innerHTML = ''
+          errorMsg.classList.add('hide')
+          validMsg.classList.add('hide')
+        }
+
+        // Validate phone number.
+        let validate = function (event) {
+          if (event.type === 'blur') {
+            reset()
+          }
+          if (input.value.trim()) {
+            if (iti.isValidNumber()) {
+              input.classList.remove('error')
+              validMsg.classList.remove('hide')
+              errorMsg.innerHTML = ''
+              errorMsg.classList.add('hide')
+              if (event.type === 'blur') {
+                input.value = iti.getNumber()
+              }
+            }
+            else {
+              let errorCode = iti.getValidationError()
+              input.classList.add('error')
+              errorMsg.innerHTML = errorMap[errorCode]
+              errorMsg.classList.remove('hide')
+              validMsg.classList.add('hide')
+            }
+          }
+        }
+
+        // Allow entering only 'phone' symbols.
+        function clean (event) {
+          let position = this.selectionStart,
+            pattern = /[^0-9\+\-\(\)\ ]/g,
+            value = this.value
+          if (pattern.test(value)) {
+            this.value = (value.replace(pattern, ''))
+            position--
           }
+          this.setSelectionRange(position, position)
         }
-      });
 
-      // Reset on change or keyup.
-      input.addEventListener("change", reset);
-      input.addEventListener("keyup", reset);
+        // Add listeners for phone validation.
+        input.addEventListener('change', validate)
+        input.addEventListener('keyup', validate)
+        input.addEventListener('blur', validate)
 
+        // Add listener for 'clean' function.
+        input.addEventListener('input', clean)
+      })
     }
-  };
+  }
 
-}());
+}())
diff --git a/src/Plugin/Field/FieldWidget/TelephoneInternationalWidget.php b/src/Plugin/Field/FieldWidget/TelephoneInternationalWidget.php
index 9b3323f..33d3223 100644
--- a/src/Plugin/Field/FieldWidget/TelephoneInternationalWidget.php
+++ b/src/Plugin/Field/FieldWidget/TelephoneInternationalWidget.php
@@ -27,7 +27,7 @@ class TelephoneInternationalWidget extends TelephoneDefaultWidget {
       '#type' => 'textfield',
       '#default_value' => isset($items[$delta]->value) ? $items[$delta]->value : NULL,
       '#placeholder' => $this->getSetting('placeholder'),
-      '#field_suffix' => '<span id="valid-msg" class="hide">✓ Valid</span><span id="error-msg" class="hide"></span>',
+      '#field_suffix' => '<span class="valid-msg hide">✓ Valid</span><span class="error-msg hide"></span>',
     ];
     $element['value']['#attributes']['class'][] = 'telephone_international_widget';
     $element['value']['#attached']['library'][] = 'telephone_international_widget/intl-tel-input';