Issue with copying text to clipbard from the input (JS, jQuery)

Question

I have table, in one of the tds there is hidden input, once i click on that td text from the input should be copied to clipboard.

All works fine on chrome, safari, firefox desktop browsers and android mobile. But doesn't work on apple mobile.

$(document).ready(function() {
  $('[id^=clickorderno-]').click(function(e) {
    e.preventDefault();

    var copyOrderno = $(this).data('copyid');
    var orderText = $('#copyorderno-' + copyOrderno).select();
    console.log(orderText);
    try {
      var successful1 = document.execCommand('copy');
      var msg1 = successful1 ? 'successful' : 'unsuccessful';
    } catch (err) {}
  });
});

.sample-td {
  width: 100px;
  height: 100px;
  background-color: green;
}

.input-noshow {
  background-color: transparent;
  border: 0px;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 5px;
  color: transparent;
  cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-copyid='1' id="clickorderno-1" class='sample-td'>
      <input type='text' class='input-noshow' id='copyorderno-1' value='To be copied'>
    </td>
  </tr>
</table>

Any sugestions, thx for your help in advance