updating html dynamically when moving elements

I create some circles by clicking on the canvas, at the same time that some html is generated. The idea is to update the html information when the circle is modified

by Mauricio Sanchez

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="main-container">
			<div id="picker">
				<div id="picker-circle"> </div>
				<h2 id="picker-text"> Click on the circle to draw on the canvas</h2>
			</div>
			<div id="container"></div>
			<code id="code" data-langue="javascript"> <ul class="code-list"></ul> </code>

</div>

CSS

#main-container{
	width: 900px;
	height: 600px;
	margin: auto;
	overflow: auto;
}

#container{
	margin-left: 25px;
	background-color: gray;
	width: 300px;
	height: 300px;
	float: left;
}

#picker{	
	float: left;
	overflow: hidden;
	width: 75px;
}

#picker-circle{
	overflow: auto;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	background-color: orange;
}

#code{
	float:left;
	width: 300px;
	overflow: auto;
	height: 100%;
	background-color: lightgreen;
}

.circle-color-input{
	display: inline;
	transition: 0.5s padding;
    /*font-size: 15rem;*/
    font-weight: bold;
    /*padding: 8rem;*/
    /*padding-left: 10rem;*/
    outline: none;
    z-index: 500;
    /*position: relative;*/
}

.circle {
	width:60px;
	height:10px;
	overflow: hidden;

}

.circle-radius{
	width:100px;
	height:10px;
	overflow: hidden;
}

JavaScript

var canvas = Raphael("container", 300, 300);
var circleSet = canvas.set();
var ourCanvas = $('svg').last();
ourCanvas.attr("id", "canvas");
var canvasHandler = $("#canvas");
//We create a div with a class to append our canvas
var containerHandler = $("#container");
var sizerClass = $("circle.sizer");
var circlePicker = $('#picker-circle');
var codeElement = $('#code');
var circlePickerSelector = false;
//We use this array to store all the different circles that get drawn on the screen
var circles = [];
//This is to assign color to the circle
//This last two variables add sequential IDs to our circles
var circleCounter = 1; // We are going to use this variable to pair all of the elements related to each class
var sizerCounter = 1000;

canvasHandler.mouseup(function (e) {
// console.log(e);
// var mouseX = e.pageX - findPos(this)[0];
// var mouseY = e.pageY - findPos(this)[1];
var mouseX = e.offsetX;
var mouseY = e.offsetY;
if (circlePickerSelector) {
makeCircle(mouseX, mouseY);
circlePickerSelector = false;
}

});

circlePicker.click(function () {
circlePickerSelector = !circlePickerSelector;
// booleanChecker(circlePickerSelector);
// console.log(circlePickerSelector);
});

function makeCircle(mouseX, mouseY) {
var radius;
var fill;
var circle = canvas.circle(mouseX, mouseY, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
});
var ourCircle = $("circle").last();
ourCircle.attr("class", circleCounter);

circles.push(circle);

var handlerPos = [mouseX + 35, mouseY + 35];
var s = canvas.circle(handlerPos[0], handlerPos[1], 10).attr({
fill: "hsb(.8, .5, .5)",
stroke: "none",
opacity: .5
});

s.node.id = sizerCounter;
var sizerClass = $('circle').last();
sizerClass.attr("class", "main-circle sizer");
var newSizerClass = $(".sizer");
// console.log(s);
s.hide();

var circleClass = $("." + String(circleCounter));
var sizerID = $("#" + String(sizerCounter));
circleClass.mouseenter(function () {
sizerID.toggle();
});
circleClass.mouseleave(function ()...