Select2 is not working for dynamically generated rows

Question

I want to dynamically add new rows for each prescription I make, I am using select2 class in the select list but each time I add a row, the second row is disabled and unable to select new item.

<select name="medicine[]" class="form-control calcEvent medicine itemName select2" id="medicine" required>
  <option>---Select Medicine ---</option>
  <?php
   $result = $this->db->get('db_items')->result();
   foreach ($result as $medicine) {

   ?>

   <option value="<?php echo $medicine->id; ?>"><?php echo $medicine->item_name; ?></option>
   <?php }
   ?>
   </select>

this is what happens when I select

I tried to use ajax to allow search in the text select field but I didn't work. this is my ajax code

var base_url = $('#base_url').val();
    $('.itemName').select2({

        placeholder: '--- Select Item ---',
        allowClear: true,
        ajax: {
            url: base_url + 'prescription/searchmed',

            dataType: 'json',
            delay: 250,
            processResults: function(data) {
                return {

                    results: data,
                    allowClear: true

                };
            },
            cache: true
        }
    });

when adding new row, this is how I do

var add_button = $('.add_button');
            var delete_button = $('.delete_button');
            //var wrapper = $('.field_wrapper');
            var x = 1;
            $(add_button).click(function() {
                if (x < max_field) {
                    x++;

                    //$(wrapper).append(html_fields);
                    // var clone = $(".table tr:last").clone().find('input').val('').end().insertAfter(".table tr:last");
                    var newRow = $(".table   tr:last").clone(true).find(':input').val('').end();

                    $(".table").append(newRow);
                }

            });

I have tried several links here but couldn't get through this

Wrap your select2 initialisation in a function, call that function on page load, then after an append call that initialisation function again - that way you will re-initialise on the dynamic elements — Grant, Aug 30 '20 at 07:48
After `$(".table").append(newRow);` you need to call `newRow.find('.select2').select2();` — Will B., Aug 30 '20 at 08:03
@fyrye there small problem, when the second row is added, it is somehow layered. check this link https://drive.google.com/drive/folders/1NF-ZHlOdzmeAAomY41nACzgXA6hCOtU6?usp=sharing have shared the behavior — Nehemiah Limo, Aug 30 '20 at 08:39
Does this answer your question? [Cloned Select2 is not responding](https://stackoverflow.com/questions/17175534/cloned-select2-is-not-responding) — Will B., Aug 30 '20 at 08:57
For clarity you need to do something like this https://jsfiddle.net/j12escmn/2/ @NehemiahLimo So by destroying the origin select2 instance, you can safely clone the row, then instantiate select2 on the new row and source row. The answers from the question I flagged as duplicate seem to be overly convoluted, but the base concept is still needed to `destroy` the original select2 instance. — Will B., Aug 30 '20 at 09:53

Select2 is not working for dynamically generated rows

0 Answers0