我还没有任何运气使用css转换旋转每个图标从一个到另一个时，点击展开和折叠一个表。我希望每个图标旋转180度，当你打开或关闭表。我尝试使用fa-rotate和flip，但不起作用，我应用的任何css转换也不起作用
Fiddle here - https://jsfiddle.net/kcexpg4j/3/

body{border:1px solid black}
table{width:400px;margin:0 auto}
.fa{cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table>
   <caption>
      <span class="module_expand custom_collapse" id="myCollapse_13" onclick="jQuery('#myCollapse_13').parent('').parent().find('tbody:eq(0)').attr('style','display:none');jQuery('#myExpand_13').removeAttr('style');jQuery('#myCollapse_13').attr('style','display:none');">
      <i class="fa fa-minus" aria-hidden="true"></i>
      </span>
      <span class="module_expand custom_expand" id="myExpand_13" onclick="jQuery('#myExpand_13').parent().parent().find('tbody:eq(0)').removeAttr('style');jQuery('#myExpand_13').attr('style','display:none');jQuery('#myCollapse_13').removeAttr('style');" style="display:none">
      <i class="fa fa-plus" aria-hidden="true"></i>
      </span>
      <span>Current Waiver Claims</span>
   </caption>
   <tbody>
      <tr>
         <th>Round</th>
         <th>Add</th>
         <th>Drop</th>
         <th>Time Entered</th>
      </tr>
      <tr>
         <td colspan="4" align="center">You don't have any waiver claims submitted into the system at this time.</td>
      </tr>
   </tbody>
</table>