What is causing my JS conflict?

Hey there,

I’m wondering if someone can help me understand why my scripts are conflicting on my project. I have a form from @Finsweet that uses this code embedded in the form itself.


<!-- [Attributes by Finsweet] Custom Form Select -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-selectcustom@1/selectcustom.js"></script>


<!-- This script lets us use any component for our arrows. This way we can position freely -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
 var l = $('#flowbaseSlider .w-slider-arrow-left');
 var r = $('#flowbaseSlider .w-slider-arrow-right');
 $('#flowbaseSlider')
   .on('click', '.back-button-slide', function() {
     l.trigger('tap');
   })
   .on('click', '.next-button-slide', function() {
     r.trigger('tap');
   });
});
</script>

Then I also have this code I’m using from @PixelGeek to dynamically populate a field a reference field.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

$('.select-item').each(function(){
  var s =$(this).text();
  $('.select-field').append('<option value="'+s+'">'+s+'</option>');
});

</script>```

I know the code is conflicting some how but I’m still to new to coding to understand why or how to fix. Can someone help me?


Here is my site Read-Only: Webflow - The Attributes

1 Like

Not needed as same version already loaded by default. Remove an test. If issue persists we can circle back.

Legend! That worked perfectly