Nsryjdtyk

i have a simple code to clone dropdown menu with div :

<div id="tag-wrapper">

        <label for="">Tag (max 3)</label>

        <button id="add_tag">Add Tag</button>

        {{-- <div id="add_tag">Add Tag</div> --}}



        <select name="tags" id="tag_select">

            <option value="0">Nothing</option>

            @foreach ($tags as $tag)

                <option value="{{$tag->id}}">{{$tag->name}}</option>

            @endforeach

        </select>



        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var counter = 0;

            $(document).ready(function(){

                $("#add_tag").click(function(e){

                    e.preventDefault();

                    counter++;

                    if(counter < 3){

                        $("#tag_select").clone().appendTo('#tag_wrapper');

                    }

                });

            });

        </script>

    </div>

when the button with id=add_tag clicked, it should clone the dropdown menu with id=tag_select, but that not working. Any suggestion?

The real issue is your wrapper id is tag-wrapper. But you miss spelled while appending as tag_wrapper. Even though you fix this, there are 2 more issues will raise.

1. 
   

   Since you are cloning the element, you cant use id attribute any more. Give it a class name as ,

   
   
   

   
   

   Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead. - https://api.jquery.com/clone/

   
   

   
   
   

   <select name="tags" class="tag_select">
   
   

   
   


2. 
   

   Now, while cloning, it will select all the elements with the same class name and result in duplicate elements. You can avoid this by retrieving only the first/last element from the cloned ones.

   
   
   

   <div id="tag-wrapper">
   
       <label for="">Tag (max 3)</label>
   
       <button id="add_tag">Add Tag</button>
   
   
   
       <div id="tag_selects">
   
           <select name="tags" class="tag_select">
   
               <option value="0">Nothing</option>
   
               @foreach ($tags as $tag)
   
                   <option value="{{$tag->id}}">{{$tag->name}}</option>
   
               @endforeach
   
           </select>
   
       </div>
   
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
   
       <script type="text/javascript">
   
           var counter = 0;
   
           $(document).ready(function(){
   
               $("#add_tag").click(function(e){
   
                   e.preventDefault();
   
                   counter++;
   
                   if(counter < 3){
   
                       $(".tag_select").clone().last().appendTo('#tag_selects');
   
                   }
   
               });
   
           });
   
       </script>
   
   </div>
   
   

   
   

JS Fiddle working example : https://jsfiddle.net/za8h2L19/1/