Add and delete rows system with bootstrap rows

Question

I want to make an add and delete rows system. However I don't have any idea on how to make it. I've seen some similar questions but all of them use <TR> and <TD> and I want to use Bootstrap.

This is my html:

<tr>
        <td class="pref-list-m">
        <button class="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true"></i></button>
        </td>

        <td class="pref-list-p">
        <button class="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i></button>
        <td>

        <td class="pref-list-d">
        <select class="btn-sm custom pref-list" name="preferences">
            <option value="" hidden> Elige </option>
            <option value="deportes">Deportes</option>
            <option value="peliculas">Peliculas</option>
            <option value="carros">Carros</option>
            <option value="Libros">Libros</option>
            <option value="Colores">Colores</option>
        </select>
        </td>

        <td class="pref-text-d">
                <input type="text" class="hidden pref-text" placeholder=" item1,item2,item3">
        </td>

        </tr>

I want to add the same each time I press #plus-btn. I have 2 .js files.

One that shows the text input when the selected option is not null:

 $(document).ready(function() {
 $(".minus-btn").click( function(event) {
    event.preventDefault();
 });
     $(".plus-btn").click( function(event) {
    event.preventDefault();
 });
   $(".minus-btn").prop('disabled', true);
   $(".plus-btn").prop('disabled', true);

   $('.pref-list').change(function() {
     var selected = $(this).val();
     if (selected != '') {
       $('.pref-text').removeClass('hidden');
       $('.minus-btn').removeAttr('disabled', false);
       $(".plus-btn").removeAttr('disabled', false);

     } else {
       $(".minus-btn").removeAttr('disabled', true);
       $(".plus-btn").removeAttr('disabled', true);

     }

   })

 });

And this is the button I use to add the table. It adds the table but it adds it on the left and when it adds the table, the above js file does not work with the new select btn:

   $(document).ready(function() {
   $(".plus-btn").click(function() {
     $("#extra-rows").append(
        '<tr>\
          <td class="pref-list-m">\
          <button class="minus-btn"><i id="minus-icon" class="fa fa-minus" aria-hidden="true"></i></button>\
          </td>\
          <td class="pref-list-p">\
          <button class="plus-btn"><i id="plus-icon" class="fa fa-plus" aria-hidden="true"></i></button>\
          <td>\
          <td class="pref-list-d">\
          <select class="btn-sm custom pref-list" name="preferences">\
            <option value="" hidden> Elige </option>\
            <option value="deportes">Deportes</option>\
            <option value="peliculas">Peliculas</option>\
            <option value="carros">Carros</option>\
            <option value="Libros">Libros</option>\
            <option value="Colores">Colores</option>\
          </select>\
          </td>\
          <td class="pref-text-d">\
                <input type="text" class="hidden pref-text" placeholder=" item1,item2,item3">\
          </td>\
          </tr>\
                ');
      });

  $("#delete_Row").click(function() {
    if ($(".test tr").length != 0) {
     $(".test tr:last-child").remove();
      } else {
       alert("Now table is empty");
      }
    })
    });

Please help me fix this. Thank you.

<---------------- FOUND THE ANSWER ------------------------------------>

<script type="text/javascript">

 var i = 1;


  function addRow(){
     if (i <= 5){
        i++;
        var div = document.createElement('div');
        var btnplus = document.getElementById('btnplus');
        var btnminus = document.getElementById('btnminus');
        btnplus.setAttribute('onclick','addRow()')
        btnminus.setAttribute('onclick','deleteRow()')
         div.innerHTML = '<tr>\
        <td class="pref-list-d">\
        <select class="btn-sm custom pref-list" onchange="addText()" name="preferences" id="pref-select'+i+'">\
            <option value="" hidden> Elige </option>\
            <option value="deportes">Deportes</option>\
            <option value="peliculas">Peliculas</option>\
            <option value="carros">Carros</option>\
            <option value="Libros">Libros</option>\
            <option value="Colores">Colores</option>\
        </select>\
        </td>\
        \
        <td class="pref-text-d">\
                <input type="text" class="hidden" id="pref-text'+i+'" "placeholder=" item1,item2,item3">\
        </td>\
        \
          </tr>';
         document.getElementById('rows').appendChild(div);

    }

     $(".plus-btn").click( function(event) {
    event.preventDefault();
    })
     $(".minus-btn").click( function(event) {
         event.preventDefault();
     })


 }

 var a = 1;
 function addText(){
     var selected = $('#pref-select'+a).val();
     $("#pref-text"+a).removeClass('hidden');
     $('.minus-btn').removeAttr('disabled', false);
     $(".plus-btn").removeAttr('disabled', false);
     a++;
 }



</script