JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span>Automatic</span>
    <pre id="preAutomatic"></pre>
    <div id="jQueryAutomatic"></div>
    <div id="TextAutomatic"></div> 
</p>
<hr />
<p>
    <span>Manual</span>
    <pre id="preManual"></pre>
    <div id="TextManual"></div>
</p>
<hr />
<p>
    <span>Partial</span>
    <pre id="prePartial"></pre>
    <div id="jQueryPartial"></div>
    <div id="TextPartial"></div>
</p>

JavaScript

var checkBoxAuto = $("<input />", { 
    id: "idAuto" 
    , type : "checkbox"
    , class: "answer"
    , checked : true
}); 

//How do I get outter HTML from dynamically created checkbox
var checkBoxAutoText = $("<div />")
    .append(checkBoxAuto)
    .remove().html();

$("#preAutomatic").text(checkBoxAutoText);
$("#jQueryAutomatic").append(checkBoxAuto); //This works, but...
$("#TextAutomatic").html(checkBoxAutoText); //...need this to work instead

//-----------------

var checkBoxManualText = "<input id='idManual' type='checkbox' class='answer' checked='checked' />";
    
$("#preManual").text(checkBoxManualText);
$("#TextManual").html(checkBoxManualText);

//-----------------

var checkBoxPartial = $('<input type="checkbox" />').attr({
    'id': 'idPartial'
    , 'checked': 'checked'
});

var checkBoxPartialText = $("<div />")
    .append(checkBoxPartial)
    .remove().html();

$("#prePartial").text(checkBoxPartialText);
$("#jQueryPartial").append(checkBoxPartial);
$("#TextPartial").html(checkBoxPartialText);