checkboxes values are displayed but checkboxes are not displayed

enter image description here

   function getBrand1(id)

{ // alert('Choose brands!');

if(document.getElementById(id).checked)
{

   $.ajax({
    url: 'http://localhost/partsanalysis/public/brand/Ajax/'+id,
   type: "GET",
   dataType: "json",
    error: function(data, errorThrown)
      {
          console.log('request failed :'+errorThrown);
      },
   success:function(result) {
     console.log(result);
    // alert(result);


             /*       $.each(result, function(index, value) { 
                    //alert(value); 
                    // $("#brands").html('<input type="checkbox" />'+value ); 
                    var markup = "<tr><td><input type='checkbox' name='brand_id'></td><td>" + value + "</td></tr>";
                    $("#brands").append(markup);


                  }); */

                   $.each(result, function(index, value) { 
                    //alert(value); 
                    // $("#brands").html('<input type="checkbox" />'+value.brand_name ); 
                    var markup = "<tr><td><input type='checkbox' name='brand_id'></td><td>" + value.brand_name + "</td></tr>";
                    $("#brands").append(markup);

                  });



               }
          });
      }     

    else
        {
            $("#brands").html(""); 
        }


    }

view

                         <table id="brands">
                            <tr><td> 

                                <input type="checkbox"  name="brand_id"></td></tr>

                                </table>

please check my code where i going wrong when one checkbox is check shows its multiple checkboxes, in this case on click shows values but without checkbox