title: Dynamic input field with jquery ui slider not working
body: <p>I am trying to create a dynamic input field with jquery up slider but the slider works only for the first field but does not for dynamic field. here is the <a href="https://jsfiddle.net/rupomkhondaker/hpbL28ax/" rel="nofollow noreferrer">fiddle</a> </p>
  
  <p><a href="https://i.stack.imgur.com/2KEHE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2KEHE.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).load(function(){
  
  $( "#slider-range" ).slider({
                min: 0,
                max: 100,
                values: [ 0],
                slide: function( event, ui ) {
                  $( "#tasks_status" ).val( ui.values[ 0 ] );
                }
              });
  
              $("#tasks_status").change(function() {
                  $("#slider-range").slider('values',0,$(this).val());
              });      
              
              //Create dynamic form
         var i=1;  
        $('#add').click(function(){  
          i++;  
          $('#dynamic_field')
          .append 
          ('&lt;tr id="row'+i+'" class="dynamic-added"&gt;&lt;td width="50%"&gt;&lt;input type="text" id="tasks_name" name="tasks_name[]" placeholder="Enter task Name" class="form-control" required/&gt;&lt;/td&gt;&lt;td width="30%"&gt;&lt;div id="slider-range"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td width="15%"&gt;&lt;input type="text" id="tasks_status" name="tasks_status[]" placeholder="0" class="form-control" required/&gt;&lt;/td&gt;&lt;td width="5%"&gt;&lt;button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove"&gt;X&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;');  
        });  
        $(document).on('click', '.btn_remove', function(){  
          var button_id = $(this).attr("id");   
          $('#row'+button_id+'').remove();  
        });
  
  
  
  
  
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
    margin-top:60px;
    
  }
  .table td, .table th {
      padding: .1rem;
      vertical-align: top;
      border-top: 1px solid #dee2e6;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"&gt;&lt;/script&gt;
  
    &lt;div class="form-group"&gt;
       &lt;label class="col-md-2 control-label" for="name"&gt;Project Tasks&lt;/label&gt;
       &lt;div class="col-md-10"&gt;
      &lt;div class="table-responsive"&gt;  
       &lt;table class="table table-bordered" id="dynamic_field"&gt;  
        &lt;tr&gt;  
         &lt;td width="50%"&gt;&lt;input type="text" id="tasks_name" name="tasks_name[]" placeholder="Enter task Name" class="form-control" required/&gt;&lt;/td&gt; 
         &lt;td width="30%"&gt;&lt;div id="slider-range"&gt;&lt;/div&gt;&lt;/td&gt; 
         &lt;td width="15%"&gt;&lt;input type="text" id="tasks_status" name="tasks_status[]" placeholder="0" class="form-control" required/&gt;&lt;/td&gt;  
         &lt;td width="5%"&gt;&lt;button type="button" name="add" id="add" class="btn btn-success"&gt;Add&lt;/button&gt;&lt;/td&gt;  
        &lt;/tr&gt;  
       &lt;/table&gt;  
       
      &lt;/div&gt; 
  
       &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>