When trying to create dynamic CheckBox elements, I encounter issues with positioning them correctly. I aim to place them below the input field instead of below the Image. However, I am unsure of how to achieve this specific placement.
HTML:
<div id="modalDialog">
<form>
<p>Description:</p>
<input type="text" id="customTextBox" style="width: 100%; font-size: 120%;" />
<hr class="fancy-line" />
<p>Card due Date:</p>
<input type="text" id="datepicker" style="width: 15%" />
<input type="button" id="Getbtn" value="Get value" />
<hr class="fancy-line" />
<p>Things To Do:</p>
<div id="progressbar">
<div id="progress">
<div id="pbaranim"></div>
</div>
</div>
<p>Create CheckBox:</p>
<input type="text" id="checkBoxName" />
<input type="button" id="btnSaveCheckBox" value="_Ok" />
<hr class="fancy-line" />
<p>
<img src="/Pages/Images/comment.png" width="40" height="40" style="display: inline-block" />Comments:</p>
</form>
</div>
JQuery:
$(document).ready(function () {
$('#btnSaveCheckBox').click(function () {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
$(function () {
$("#progressbar").progressbar({
value: 0,
max: 100
});
});
});
function addCheckbox(name) {
var container = $('#modalDialog');
var inputs = container.find('input');
var id = inputs.length + 1;
$('<input />', {
type: 'checkbox',
id: 'cb' + id,
value: name
}).appendTo(container);
$('<label />', {
'for': 'cb' + id,
text: name
}).appendTo(container);
$('<br/>').appendTo(container);
}