javascriptでdivに画像のセット

javascriptにて、divに動的にimageをセットするスクリプトを作っています。

screen2とscreen3のdivに同じ画像をセットしたいのですが、うまくいきません。
screen3は原寸サイズ、screen2は原寸の3分の1のサイズになるようにしています。
下記のスクリプトでscreen2のみ、screen3のみで実行するとそれぞれのスクリーンに綺麗に画像が
設定されるのですが、同時に行うとscreen3のみにセットされます。(実行順を入れ替えるとscreen2のみになる)

何か間違っていますでしょうか。

javascript
1
2           function addImage(path, x, y, width, height) {
3                
4                $('#screen2 .bg2').remove();
5                $('#screen3 .bg3').remove();
6
7                var img = $('<img>').attr({
8                    'src': path,
9                }).css({
10                    width: '100%',
11                    height: '100%'
12                });
13
14                if (!width) width = img.prop('naturalWidth');
15                if (!height) height = img.prop('naturalHeight');
16
17                $('<div class="bg2">').resizable({
18                    containment: 'parent'
19                }).draggable({
20                    containment: 'parent',
21                    scroll: false
22                }).css({
23                    width: width / 3,
24                    height: height / 3,
25                    left: x / 3,
26                    top: y / 3,
27                    zIndex: '0',
28                    position: 'absolute',
29
30                }).append(img).appendTo('#screen2');
31
32                             
33                $('<div class="bg3">').resizable({
34                    containment: 'parent'
35                }).draggable({
36                    containment: 'parent',
37                    scroll: false
38                }).css({
39                    width: width ,
40                    height: height ,
41                    left: x ,
42                    top: y ,
43                    zIndex: '0',
44                    position: 'absolute',
45
46                }).append(img).appendTo('#screen3');
47
48            };
49