如何在内联css中使用jquery变量

我有一个脚本，我想在用户点击的地方生成我的 div 并且那个 div 留在那里，所以现在我有了这个 jquery 脚本

$(document).ready(function() {
    $('body').click(function(e) {
        var offset = $(this).offset();
        $('#x_axis').html(e.clientX - offset.left);
        var x = (e.clientX - offset.left);
        $('#y_axis').html(e.clientY - offset.top);
        var y = (e.clientY - offset.top);
        $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');
        $('#bloom').css('left', x);
        $('#bloom').css('top', y);
    });
});

现在在这一行，我想将 X 和 Y 变量添加到 left 和 top 属性：

            $('body').append('<div id="bloom" style="position: relative; left: HERE I WANT TO PLACE X;">asd</div>');

知道如何做到这一点吗？或者任何更好的方法来制作这个东西，当用户点击页面的每个部分时，div会在那里生成