Issue adding custom quantity form element

Hi, 

I'm having issues with the JS of the below custom quantity selector component not working on one of my site pages. The code works fine on Code Pen but as soon as I put into the relevant page using the Code module, the buttons don't have any affect on the QTY number. Looks like the JS is not speaking to the component. 

Any help would be great!

I put all of the code below in the code module on the specific page I want it to appear on (not the index file).

I've put the CSS in <style> tags and JS in <script> tags but no joy. 

Code below:

<form>
    <fieldset>
        <input type="button" value="-" class="decrease" />
        <input type="text" id="three-max" value="0" disabled />
        <input type="button" value="+" class="increase" />
    </fieldset>
</form>



* {
    margin: 0;
    padding: 0;
    text-align: center;
}
body {
    background-color: #F4F3F3;
    font: normal 14px/100% Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: #444;
}
form {
    background-color: #fff;
    width: 300px;
    padding: 10px;
    margin: 20px auto;
    -webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
legend {
    padding-bottom: 14px;
    text-align: left;
}
fieldset {
    margin-bottom: 14px;
    padding-bottom: 14px;
}
fieldset, input[type="button"] {
    border: 0;
}
input[type="button"] {
    background-color: #ED5A48;
    color: #fff;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
input[type="text"] {
    border: 1px solid #F4F3F3;
    height: 22px;
    width: 50px;
}





$(function () {

    set_($('#three-max'), 2);  //return 3 maximum digites

    function set_(_this, max) {
        var block = _this.parent();

        block.find(".increase").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && (currentVal + 1) <= max) {
                _this.val(currentVal + 1);
            }
        });

        block.find(".decrease").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && currentVal != 0) {
                _this.val(currentVal - 1);
            }
        });
    }
});

Hi,

Your code missing

• <style> tag in CSS
• <script> in JS code
• jQuery library
• some CSS conflict with Squarespace code

Use this new code. Add all to Code Block

<form>
    <fieldset>
        <input type="button" value="-" class="decrease" />
        <input type="text" id="three-max" value="0" disabled />
        <input type="button" value="+" class="increase" />
    </fieldset>
</form>


<style>
form * {
    margin: 0;
    padding: 0;
    text-align: center;
}
form {
    background-color: #fff;
    width: 300px;
    padding: 10px;
    margin: 20px auto;
    -webkit-box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    box-shadow: 0 0 5px rgba(170, 169, 169, .3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
legend {
    padding-bottom: 14px;
    text-align: left;
}
fieldset {
    margin-bottom: 14px;
    padding-bottom: 14px;
}
fieldset, input[type="button"] {
    border: 0;
}
input[type="button"] {
    background-color: #ED5A48;
    color: #fff;
    cursor: pointer;
    width: 24px;
    height: 24px;
}
input[type="text"] {
    border: 1px solid #F4F3F3;
    height: 22px;
    width: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {

    set_($('#three-max'), 2);  //return 3 maximum digites

    function set_(_this, max) {
        var block = _this.parent();

        block.find(".increase").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && (currentVal + 1) <= max) {
                _this.val(currentVal + 1);
            }
        });

        block.find(".decrease").click(function () {
            var currentVal = parseInt(_this.val());
            if (currentVal != NaN && currentVal != 0) {
                _this.val(currentVal - 1);
            }
        });
    }
});
</script>

Amazing! Thank you so much for your help, that works great now. 😀 👍