title: How can i add / change multiple select option dynamically usign vuejs from same form
body: <p><a href="https://i.stack.imgur.com/kHYZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kHYZw.png" alt="enter image description here" /></a> <a href="https://i.stack.imgur.com/rp2wT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rp2wT.png" alt="enter image description here" /></a></p>
  <p>I have shared my code below.</p>
  <pre><code>&lt;template&gt;
          &lt;div class=&quot;productUnitPrice&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                  &lt;h4&gt;Product Bundle&lt;/h4&gt;
                  &lt;div v-for=&quot;(unitPackage,index) in this.UnitPackages&quot; class=&quot;col-lg-12&quot; style=&quot;margin-bottom: 5px; background: #ddd&quot;&gt;
                      &lt;div class=&quot;pull-right text-right&quot;&gt;
                          &lt;!--increase and decrease row quantity --&gt;
                          &lt;button type=&quot;button&quot;  v-on:click=&quot;AddUnitPackage(index)&quot; class=&quot;btn-info btn btn-success text-right pull-right btn-sm&quot;&gt;+&lt;/button&gt;
                          &lt;span v-if=&quot;index &gt; 0&quot;&gt;
                              &lt;button type=&quot;button&quot;  v-on:click=&quot;removeUnitPackage(index)&quot; class=&quot;btn-info btn btn-success text-right pull-right btn-sm&quot;&gt;-&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;div style=&quot;padding:10px 0px&quot;&gt;
                          &lt;h6 class=&quot;heading&quot;&gt;&lt;strong&gt;Select Product Unit &lt;/strong&gt;&lt;/h6&gt;
                          &lt;select :key=&quot;index&quot; name=&quot;unit_type_id[]&quot; v-model=&quot;unitPackage.unit_type_id&quot; @change=&quot;getUnitQuantity(unitPackage.unit_type_id,index)&quot;&gt;
                              &lt;option class=&quot;text-danger&quot; :value=&quot;null&quot;&gt;Select Product Unit&lt;/option&gt;
                              &lt;option v-for=&quot;unitType in unitTypes&quot; :value=&quot;unitType.id&quot; class=&quot;text-danger&quot;&gt;
                                  {{unitType.unit_type}}
                              &lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if=&quot;unitPackage.unit_type_id&quot;&gt;
                          &lt;h6 class=&quot;heading&quot;&gt;&lt;strong&gt;Select Quantity&lt;/strong&gt;&lt;/h6&gt;
                          &lt;select :key=&quot;index&quot; name=&quot;unit_quantity_id[]&quot; v-if=&quot;unitPackage.unit_type_id !== null&quot; v-model=&quot;unitPackage.unit_quantity_id&quot;&gt;
                              &lt;option class=&quot;text-danger&quot; :value=&quot;null&quot;&gt;Select Product Quantity&lt;/option&gt;
                              &lt;option v-for=&quot;unitQuantity in unitQuantities&quot; :value=&quot;unitQuantity.id&quot; class=&quot;text-danger&quot;&gt;
                                  {{unitQuantity.quantity}}
                              &lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if=&quot;unitPackage.unit_type_id&quot;&gt;
                          &lt;h6 class=&quot;heading&quot;&gt;
                          &lt;strong&gt;Select Unit Price&lt;/strong&gt;&lt;/h6&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;unitPackage.price&quot; name=&quot;price[]&quot; placeholder=&quot;price&quot;&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if=&quot;unitPackage.price&quot;&gt;
                          &lt;h6 class=&quot;heading&quot;&gt;
                              &lt;strong&gt;Previous Price&lt;/strong&gt;&lt;/h6&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;unitPackage.previous_price&quot; name=&quot;previous_price[]&quot; placeholder=&quot;Previous Price&quot;&gt;
                      &lt;/div&gt;
  
                      &lt;div v-if=&quot;unitPackage.previous_price&quot;&gt;
                          &lt;h6 class=&quot;heading&quot;&gt;
                              &lt;strong&gt;Unit Stock&lt;/strong&gt;
                              &lt;p&gt;put blank if unit_stock is unlimited &lt;/p&gt;&lt;/h6&gt;
                          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; v-model=&quot;unitPackage.unit_stock&quot; name=&quot;unit_stock[]&quot; placeholder=&quot;Unit Stock&quot;&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          import Api from &quot;../../../api/api&quot;;
          export default {
              components: {
  
              },
              data(){
                  return{
                      UnitPackages: [
                          {   index:0,
                              unit_type_id:null,
                              unit_quantity_id:null,
                              price:null,
                              unit_stock:null,
                              previous_price:null
                          }
                      ],
                      unitTypes:[],
                      unitQuantities:[],
                  }
              },
              methods:{
                  getUnitQuantity(unit_type_id,index){             
                     // this.UnitPackages.unit_type_id = unit_type_id;
                      Api().get('product_unit_types',{
                          params:{
                              unit_type_id:unit_type_id
                          }
                      })
                          .then(response =&gt;{                              
                               this.unitQuantities = response.data;                  
                          })
                          .then(json =&gt; console.log(json))
                  },
  
  
                  AddUnitPackage(index){
                      this.UnitPackages.push({                          
                          index: index+1,
                          unit_type_id:null,
                          unit_quantity_id:null,
                          price:null,
                          unit_stock:null,
                          previous_price:null
                      });
                  },
                  removeUnitPackage(index){
                      this.UnitPackages.splice(index,1);
                  },
              },
  
  
              mounted() {
                  Api().get('/product_unit_types')
                      .then(response =&gt;{
                          this.unitTypes = response.data.data;
                          console.log(response)
                      })
                      .then()
              }
          }
      &lt;/script&gt;
  </code></pre>
  <p>i want to add multiple select data dynamically. when i click '+' sign it will clone same form but if i change the first item it also changes the other section too. how can i call and change specific select item.</p>
  <p>i want to add multiple select data dynamically. when i click '+' sign it will clone same form but if i change the first item it also changes the other section too. how can i call and change specific select item.</p>