jQuery script doesn't work properly in IE

Question

There is a jQuery script on my website with additional JS code.

Example:

 $("[data-type='phone'] .input .form-control").intlTelInput({ allowDropdown: true, autoPlaceholder: "aggressive", initialCountry: "auto", geoIpLookup: function(success, failure) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; success(countryCode); }); }, }); let targets = document.querySelectorAll('.selected-flag'), options = { 'attributes': true }, observationHandler = function(mutations, observer) { for (let mutation of mutations) { let target = mutation.target, recipient = target.closest('div.fields').querySelector('[data-type="hidden"] input'); recipient.value = target.title; } }, observer = new MutationObserver(observationHandler); targets.forEach( (target) => observer.observe(target, options) ); 

 .field { padding: 10px 0; } .form-control { padding: 10px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css"> <h2>Main form on page</h2> <div class="fields"> <div class="field" data-type="phone" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div> </div> <div class="field" data-type="hidden" style="width: 247px;"> <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div> </div> </div> <!-- MODAL FORM 1 --> <h2>Modal form 1</h2> <div class="modal-body"> <div class="macros-form"> <div class="outer"> <div class="inner"> <div class="vertical none size-default"> <div class="body"> <div class="cont"></div> <form class="form text-top" data-form="" data-fields=""> <div class="fields"> <div class="field" data-type="phone"> <div class="name">Telefonnummer</div> <div class="input"><input class="form-control text" style="border-radius: 4px;"></div> </div> <div class="field hidden" data-type="hidden"> <div class="input"><input class="form-control hidden-field" value="Hidden field"></div> </div> </div> </form> <div class="cont"></div> </div> </div> </div> </div> </div> </div> <!-- MODAL FORM 2 --> <h2>Modal form 2</h2> <div class="modal-body"> <div class="macros-form"> <div class="outer"> <div class="inner"> <div class="vertical none size-default"> <div class="body"> <div class="cont"></div> <form class="form text-top" data-form="" data-fields=""> <div class="fields"> <div class="field" data-type="phone"> <div class="name">Telefonnummer</div> <div class="input"><input class="form-control text" style="border-radius: 4px;"></div> </div> <div class="field hidden" data-type="hidden"> <div class="input"><input class="form-control hidden-field" value="Hidden field"></div> </div> </div> <div class="macros-button"> <div class="btn-out full xs-none"> </div> </div> </form> <div class="cont"></div> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script> 

Example: https://jsfiddle.net/kerm131/at5sL2jc/12/

It works fine in Google Chrome, Opera, Edge and Mozilla browsers. But unfortunately, it doesn't work with IE 11.

Console shows that ";" expected near this strings:

 observationHandler = function(mutations, observer) { for (let mutation of mutations) { let target = mutation.target, 

I don't know JS well, so I'm frustrated. Please, give me a hint to to solve this issue.

I tried Babel service, but it doesn't works well in IE11: https://jsfiddle.net/kerm131/xpvt214o/984507/

In this case console says that object doesn't support property or method "forEach" in

 targets.forEach(function (target) { return observer.observe(target, options); }); 

Answer 1

To make it works I add polyfill library:

 <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 

And change this:

 targets.forEach(function (target) { return observer.observe(target, options); }); 

to this:

 [].forEach.call(targets, function (target) { return observer.observe(target, options); }); 

(but I think it not necessary, first try without changing this string)