Make Custom Elements Using JQuery Change function

The first steps in creating a custom elements is no different than in any other form of web development. You write HTML markup that lays out the component, CSS rules to style it, and use JavaScript to apply logics.
    
Making custom elements saves our time and makes our code lighter. You need not to write html to repeat code. So, it’s interesting to learn how to make custom elements.

In this tutorial I am going to teach you how to make custom elements using jQuery change function. for an example i am going to create custom button elements.
Let's begin
   

1) Include the mock up on your page.
    

      <select class="select-buttons">
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select> 
        

 <div class="buttons-cover"></div>  
       

        
Take a select tag and give 10 options inside it and also make a div has class button-cover.I will append buttons inside it.
        
    2) Include the style given below:-
    

          .select-buttons{
                width:200px;
                padding:10px;
            }
            .buttons-cover{
                margin-top:20px;
            }
            button{
                padding:10px 20px;
                margin-right:10px;
                border:1px solid #449D44;
                outline: none;
                color:#fff;
                background:#5cb85c;
            }  
      

        
Here is some stuff for styling the select tags and buttons. I give some width and padding to select-button and style the button using padding, border, outline, color and background properties.
            
   3) Include JS given below:-
   

     <script src="jquery-1.11.3.min.js"></script>  
        

first of all include the jQuery library file just before the end of body tag.you can get the latest version of jQuery library file from www.jquery.com.
   
After that include this code in script tag ,Just below end of the jQuery library file.
   

         $(document).ready(function(){
                $(".select-buttons").change(function(){
                 $(".buttons-cover").empty();    
                var numBtn =$(this).children(":selected").text();    
                
                 for(i=1;i<= numBtn;i++){
                    $(".buttons-cover").append("<button>" + "click" + "</button>");
                  }
                });
            });      
        

            
  Explanation:-
 
 $(document).ready(function() means that when document is ready than code inside it will be executed.
 
 This code tells that when select option changes than we get the text inside it using text() function. In order to do this we have to select its children and storing his value in variable name numBtn.
for an example you select option having value 3 than variable numBtn store 3 inside it.
 
Then we have to encountered this value in for loop. intial value of i is sets to 1.and maximum value sets to i<= numBtn and increment using i++ until it get's out of the loop. In this manner every time we append button inside the buttons-cover and we get the number of buttons equal to selected value in the end.
 
That's it.
In this way you can also create your custom elements. It could be anything like form inputs, buttons, div, table etc.
 
You can see the live demo at https://jsfiddle.net/rohitgoyal9293/cszhajL5/1/
 
  Note:- The above code is tested on latest version of firefox and google chrome.

THANKS