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 -->
var Webflow = Webflow || [];
Webflow.push(function() {
 var l = $('#flowbaseSlider .w-slider-arrow-left');
 var r = $('#flowbaseSlider .w-slider-arrow-right');
   .on('click', '.back-button-slide', function() {
   .on('click', '.next-button-slide', function() {

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>

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


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