How to change number field to text field using JS

Question

I am making the WooCommerce quantity field a text field so it looks nicer but I can't figure out how to make the minus button work. The plus button works fine, but I have no idea why the minus button is not working, it just does nothing at all.

Maybe someone more experienced with JS can see my problem here?

jQuery(document).ready(function ($) {
    // Containing selector
    var parentSelector = $('.quantity');
    // If it's on the page
    if( parentSelector.length ) {

        // Get the original HTML
        var numberInputs = parentSelector.html();
        // Minus button
        var btnLess = '<button class="minus">-</button>';
        // Change number to text
        var textInputs = numberInputs.replace('type="number"', 'type="text"');
        // Plus button
        var btnMore = '<button class="plus">+</button>';
        // Append it all
        parentSelector.append(btnLess + textInputs + btnMore);
        // Hide the original
        parentSelector.find('input[type="number"]').hide();

        // increase or decrease the count
        $('.plus, .minus').on('click', function(e) {

            e.preventDefault();

            var newCounter = $(this).prevAll('input.qty[type="text"]');
            var oldCounter = $(this).prevAll('input.qty[type="number"]');
            var counterVal = newCounter.val();

            if( $(e.target).hasClass('plus') ) {

                counterVal++ ;

            } else {

                counterVal-- ;

            }

            // Apply to both inputs
            newCounter.val(counterVal);
            oldCounter.val(counterVal);

        });
    }
});

Answer 1

The original code is using prevAll on the minus button, but the target input appears later in the DOM. PrevAll worked fine for the plus button though, since the targeted input comes before the plus button.

The modified code below is tested and working:

jQuery(document).ready(function ($) {

    // Containing selector
    var parentSelector = $('.quantity');
    // If it's on the page
    if( parentSelector.length ) {

        // Get the original HTML
        var numberInputs = parentSelector.html();
        // Minus button
        var btnLess = '<button class="minus">-</button>';
        // Change number to text
        var textInputs = numberInputs.replace('type="number"', 'type="text"');
        // Plus button
        var btnMore = '<button class="plus">+</button>';
        // Append it all
        parentSelector.append(btnLess + textInputs + btnMore);
        // Hide the original
        parentSelector.find('input[type="number"]').hide();

        // increase or decrease the count
        $('.plus, .minus').on('click', function(e) {

            e.preventDefault();

            if( $(e.target).hasClass('plus') ) {
              var newCounter = $(this).prevAll('input.qty[type="text"]');
              var oldCounter = $(this).prevAll('input.qty[type="number"]');
              var counterVal = newCounter.val();

              counterVal++ ;

            } else {
              var newCounter = $(this).nextAll('input.qty[type="text"]');
              var oldCounter = $(this).nextAll('input.qty[type="number"]');
              var counterVal = newCounter.val();

              counterVal-- ;
            }

            // Apply to both inputs
            newCounter.val(counterVal);
            oldCounter.val(counterVal);

        });
    }
});