Calculate total checkboxes from innerHTML

Question

HTML

<select style="margin-left: 10px;" id="myDropDown">
        <option value='' disabled selected>Assign Table</option>
        <option value='1'>Table1</option>
        <option value='2'>Table2</option>
        <option value='3'>Table3</option>
    </select>
<div id="myTable">
          
        </div>
        <input type="text" id="total" value="0" readonly="readonly" />

Javascript

$('#myDropDown').change(function() {
        //Selected table
        var inputValue = $(this).val();
        var HTML;
        var HTML2;
        if (inputValue == 1) {
        HTML = '<div><input id="test-element" type="checkbox" price="1">price 1</div><br><div><input id="test-element" type="checkbox" price="2">price 2 </div>';
       }
       else if(inputValue == 2) {
       HTML = '<div><input id="test-element" type="checkbox" price="3">price 3 </div><br><div><input id="test-element" type="checkbox" price="4">price 4 </div>';
      }
      document.getElementById('myTable').innerHTML = HTML;
   });
    
    function calcAndShowTotal(){
    var total = 0;
    $('#myTable :checkbox[checked]').each(function(){
        total += parseFloat($(this).attr('price')) || 0;
        alert("working");
    });
    $('#total').val(total);   
}

$(document).on("click",'#myTable :checkbox',function() {
      //alert("working");
    calcAndShowTotal();
});

calcAndShowTotal();

I made a dropdown that toggles between different checkboxes with .innerHTML. I updated the click function to be $(document).on and it works on every click but the total value doesn't change. Why doesn't calcAndShowTotal function work? I tried changing it to $(document).on too but it doesn't calculate total. Check fiddle link for example. http://jsfiddle.net/7yf8sdpw/95/

Answer 1

The div with the id of myTable does not have any children input element of type checkbox, unlike the div with id of price list.

What exactly do you want that part of the code to do?, so I can help better...