JSFiddle - React, Tailwind, and code Playground

by bvotcode

HTML

<table id="customFields"></table>
<button class="addCF">Add</button>
<script>
$(document).ready(function() {
    MyLogic();
});

function MyLogic(){
  $(".addCF").click(function(){
      $("#customFields").append(
          '<tr>'
            + '<td>'
                    + '<select class="tabelBaru" name="data1[]">'
                            + '<option value="email" selected >Email</option>'
                            + '<option value="gender">Gender</option>'
                            + '<option value="age">Age</option>'
                    + '</select>&nbsp;'
            + '</td>'
            + '<td>'
                + '<input type="text" name="data2[]" value="" placeholder="Input Value Ke-2" />'
            + '</td>'
            + '<td>'
                + '<input type="text" name="data3[]" value="" placeholder="Input Value Ke-3" class="data3"/>'
            + '</td>'
            + '<td>'
                + '<a href="javascript:void(0);" class="remCF">Remove</a>'
            + '</td>'
        + '</tr>'
      );
  });

    $("#customFields").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    }); 

    $("#customFields").on('change', '.tabelBaru', function() {
        var $this = $(this),
            nilai = $this.val();
        console.log(nilai);
        if(nilai=='gender'){
           $this.closest("tr").find(".data3").replaceWith('<select name="data3[]" class="data3">     <option value="man" selected >Man</option>     <option value="woman">Woman</option></select>')
        }
        else {
            $this.closest("tr").find(".data3").replaceWith('<input type="text" name="data3[]" value="" placeholder="Input Value Ke-3" class="data3"/>')
        }
    });
}
</script>