Why duplicates in ModelBranch div on results?

Why duplicates in ModelBranch div on results?

Hi every, I've this code and I'm having some issues. If you take a closer look to it you'll see what I'm trying to do is just create non repeated Model-Branch pairs and put the result in div#ModelBranch but something is wrong in my logic since I get repeated results on the div and I can't get where my error is, so any help on this first doubt?

Now as a second doubt and related to the same code, I need an additional feature and again does not know how to achieve so need some push or help from people here. After have the unique pairs Model-Branch then I should establish a ManyToMany relationship between the results (Model-Branch) and Manufactures but again pairs have to bee unique, any advice around this code?

For those who doesn't like Fiddle here is the HTML & jQuery code:

  1. <fieldset class="rpni-border">
  2.     <legend class="rpni-border">Model</legend>
  3.     <table id="contenedorModelos" style="" class="table table-condensed">
  4.         <tbody id="modeloBody">
  5.             <tr>
  6.                 <td>
  7.                     <input type="radio" value="1" id="selModelo1" name="selModelos">
  8.                 </td>
  9.                 <td>Harum.</td>
  10.             </tr>
  11.             <tr>
  12.                 <td>
  13.                     <input type="radio" value="4" id="selModelo4" name="selModelos">
  14.                 </td>
  15.                 <td>Pariatur ut.</td>
  16.             </tr>
  17.             <tr>
  18.                 <td>
  19.                     <input type="radio" value="6" id="selModelo6" name="selModelos">
  20.                 </td>
  21.                 <td>Tempore animi.</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>
  25.                     <input type="radio" value="8" id="selModelo8" name="selModelos">
  26.                 </td>
  27.                 <td>Voluptatem.</td>
  28.             </tr>
  29.         </tbody>
  30.     </table>
  31. </fieldset>
  32. <fieldset class="rpni-border">
  33.     <legend class="rpni-border">Branch</legend>
  34.     <table id="contenedorMarcas" style="" class="table table-condensed">
  35.         <tbody id="marcaBody">
  36.             <tr>
  37.                 <td>
  38.                     <input type="radio" value="3" id="selMarca3" name="selMarcas">
  39.                 </td>
  40.                 <td>Ea in sequi.</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>
  44.                     <input type="radio" value="7" id="selMarca7" name="selMarcas">
  45.                 </td>
  46.                 <td>Exercitationem.</td>
  47.             </tr>
  48.             <tr>
  49.                 <td>
  50.                     <input type="radio" value="11" id="selMarca11" name="selMarcas">
  51.                 </td>
  52.                 <td>Sit alias sit.</td>
  53.             </tr>
  54.         </tbody>
  55.     </table>
  56. </fieldset>
  57. <fieldset class="rpni-border">
  58.     <legend class="rpni-border">Manufacturer</legend>
  59.     <table id="contenedorFabricante" style="" class="table table-condensed">
  60.         <tbody id="fabricanteBody">
  61.             <tr>
  62.                 <td>
  63.                     <input type="checkbox" value="3">
  64.                 </td>
  65.                 <td>Ea in sequi.</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>
  69.                     <input type="checkbox" value="7">
  70.                 </td>
  71.                 <td>Exercitationem.</td>
  72.             </tr>
  73.             <tr>
  74.                 <td>
  75.                     <input type="checkbox" value="11">
  76.                 </td>
  77.                 <td>Sit alias sit.</td>
  78.             </tr>
  79.         </tbody>
  80.     </table>
  81. </fieldset>
  82. <button id="create" type="button">Create</button>
  83. <div id="ModelBranch"></div>
  84. <button id="createM" type="button">Join Model-Branch with Manufacturer</button>
  85. <div id="ModelBranchManufacturer"></div>

jQuery:

  1. $(document).ready(function () {
        var map = {};
        var array = [];
        var arrayM = [];
        var $html = '<table><tbody id="branchModelManufacturer">';

        $("#create").on("click", function () {
            var $model = $("#modeloBody").find("input[type='radio']:checked").val(),
                $branch = $("#marcaBody").find("input[type='radio']:checked").val();

            if ($model && $branch) {
                var key = $model + '-' + $branch;
                if (!map[key]) {
                    map[key] = true;

                    array.push({
                        model: $model,
                        maca: $branch
                    });

                    $html += '<tr><td><input type="checkbox" value="' + key + '" /></td>';
                    $html += '<td>' + $model + '-' + $branch + '</td></tr>';
                   
                     $("#ModelBranch").append($html);
                    console.log(JSON.stringify(array));
                }        
            }
           
            $html += '</tbody></table>';
        });

        $("#createM").on("click", function () {
            var $allCheckboxes = $("#branchModelManufacturer").find("input[type='checkbox']");
        });
    });