javascript - jquery-ui resizable issues (can't get it to work no matter what I try) -

i must missing simple can't life of me figure out what.

basically on page i'm working on i've 6 divs same class , need them resizable. couldn't work created simple test page see if work there syntax i'm using.

i've tried use inside , outside document.ready function , none of worked.

here's code loading , script:

<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/oam-white.css" rel="stylesheet"> <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="js/jquery-ui-1.12.0.custom/jquery-ui-1.12.0.custom/jquery-ui.min.css"> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery-ui.min.js"></script> <script src="js/oam.js"></script>     <script>     $(document).ready(function() {         });     $(function() {     $('#test').resizable({         animate: true         });     }); </script> 

here's codepen

thank in advance help. rod