Trigger for details-control does not work in mobile view, will not open details row

Here is the page with the problem:

I have <i> tag for the trigger. When I click the <tr> the row opens and collapses. I tried to change the code to click on the <i> tag and it works until it resizes to mobile view. Try to click on the plus sign and resize the page to smallest width. Then the TR click still works but not clicking on the plus sign.

       $('#example').on('click', 'tr', function () { 
        var tr = $(this).closest('tr');
        var row = table.row( tr );
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.find('i.plus').removeClass('fa-minus-circle').addClass('fa-plus-circle');    // FontAwesome 5
        }
        else {
            // Open this row
            row.child( formatP(row.data()) ).show();
           // row.child.show();
          tr.find('i.plus').removeClass('fa-plus-circle').addClass('fa-minus-circle'); // FontAwesome 5
        }