jQuery(document).ready(function($) { function adjustQuantityWidth() { $('.quantity input.qty').each(function() { // Store original width if not already stored if (!$(this).data('original-width')) { $(this).data('original-width', $(this).width()); } // Create temporary span to measure text width const $measure = $('') .text($(this).val()) .css({ 'font-size': $(this).css('font-size'), 'font-family': $(this).css('font-family'), 'visibility': 'hidden', 'position': 'absolute', 'white-space': 'pre' }) .appendTo('body'); // Get content width const contentWidth = $measure.width(); $measure.remove(); // Add some padding for arrows and spacing const neededWidth = contentWidth + 25; const originalWidth = $(this).data('original-width'); // Only increase width if content needs more space if (neededWidth > originalWidth) { $(this).width(neededWidth); } else { $(this).width(originalWidth); } }); } // Run on input change and initial load $(document).on('change input', '.quantity input.qty', adjustQuantityWidth); adjustQuantityWidth(); });