jQuery css is not working for mobile

Question

Referring to my question here: Magento 2 Add custom tab to product details page conditionally

As suggested in the answer, I am trying to hide the custom tab if response is "No Data to display!".

Here is my code:

jQuery(document).ready(function(e){
                        var me = $(this);
                        if ( me.data('requestRunning') ) {
                            return;
                        }
                        me.data('requestRunning', true);
                        //$(document).on('click', '#tab-label-nutrition', function() {
                                    var customurl = "<?php echo $this->getUrl('nutrition/nutrition/index') ?>";
                                    var currentSku1 = '<?php echo $currentSku; ?>';
                                    if(currentSku1 && $(".nutritionFactsContent").children().length == 0){
                                            $.ajax({
                                                    url: customurl,
                                                    type: 'POST',                       
                                                    dataType: 'html',
                                                    showLoader: true,
                                                    data: {
                                                            sku: currentSku1,                    
                                                    },
                                                    complete: function(responseData) {
                            if (responseData.responseText == 'No Data to display!') {
                                jQuery('#tab-label-nutrition').hide();
                            } else {
                                alert('hi');
                                jQuery('#tab-label-nutrition').css('display', 'inline-block');
                            }
                            $('.nutritionFactsContent').append(responseData.responseText);
                            console.log('ajax completed');
                            me.data('requestRunning', false);
                        },
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                        }
                    });
                }
                //});//click event
            });

This works well on desktop. However does not work on mobile devices. The alert in the else part is executed though just the css is not applied.

Any help would be appreciated!

Answer 1

As per the comments above , In mobile view Id can be change of the element so try to add another css property into element and check, it will help you.