JS code function not working inside another JS function-CodePudding

I'm trying to get value which i calculated in a tag in my repeat form. It works fine in my normal form but when i add another row it won't work. This code works fine with first row but when i add new row it didn't respond. Where am I making mistake and How can i solve this issue. Thanks in advance.

    ////This is the select Option/////


         <div >
           <select id="kriyakalap" onclick="display();" name="kriyakalap[]" >
                                <option selected >क्रियाकलाप</option>
                                @foreach ($kriyakalap_array as $bi)
                                <option value="{{$bi->bujet}}"> {{$bi->kriyakalap}}</option>
                                @endforeach
          </select>
    </div>
    
    ////This is the select Option/////
    
    
    //////This the code for getting value////
    <!-- Display Budget By Kriyakalap -->
    <script>
        function display() {
        var x = document.getElementById('kriyakalap').value;
        document.getElementById('budget').innerHTML = x ;
        }
    </script>
    
    <!-- Display Budget By Kriyakalap -->
    
    
    //////This the code for getting value////




 <!-- form repeat -->
    

    <script type="text/javascript">
            $(document).ready(function() {
    
            var html = '<span><div id="form-field"> <div > <div > <select id="source" name="source[]"  required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div > <select id="kriyakalap" onclick="display();" name="kriyakalap[]"  required> <option selected disabled>क्रियाकलाप</option> @foreach ($kriyakalap_array as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> @endforeach </select> @foreach ($kriyakalap_array as $bi) @endforeach </div> <div > <span id="budget" ></span> </div> <div > <select name="debit_credit[]" id="debit_credit"  > <option selected="selected" >डेबिट / क्रेडिट</option> </select> </div> <div > <select name="debit_credit_type[]" id="debit_credit_type"  > <option selected="selected" >डेबिट / क्रेडिट प्रकार</option> </select> </div> <div > <input type="text" placeholder="रकम" name="cash[]"  id="price" required> </div> <div > <input type="button"  name="remove" id="remove" value="-"> </div> </div> </div></span>';
            var max = 5;
            var x = 1;
            $("#add").click(function() {
                
                if (x <= max) {
                    $("#form-field").append(html);
                    x  ;
                }
            })
    
            $("#form-field").on('click', '#remove', function() {
                $(this).closest('span').remove();
                x--;
            });
        });
    
    </script>
    <!-- form repeat -->

CodePudding user response：

You should have Id one time but your code contain many tag with the same id when you append your html element with js code So in your your html variable you should use instead of id="kriyakalap" like the following

let html = '<div > <div > <div > <select id="source" name="source[]"  required> <option selected disabled value="">स्रोत</option> <option>केन्द्र</option> <option>प्रदेश</option> <option>स्थानीय</option> <option>अन्य</option> </select> </div> <div > <select  onclick="display(event)" name="kriyakalap[]"  required> <option selected disabled>a</option><option selected >b</option> <option selected >c</option> @foreach ($kriyakalap_array as $bi) <option value="{{$bi->kriyakalap}}"> {{$bi->kriyakalap}}</option> 
@endforeach </select> @foreach ($kriyakalap_array as $bi) @endforeach </div> 
<div > <span id="budget" >  </span> </div> <div > <select name="debit_credit[]" id="debit_credit"  > <option selected="selected" >डेबिट / क्रेडिट</option> </select> </div> <div > <select name="debit_credit_type[]" id="debit_credit_type"  > <option selected="selected" >डेबिट / क्रेडिट प्रकार</option> 
 </select> </div> <div > <input type="text" placeholder="रकम" name="cash[]"  id="price" required> 
</div>  <div >  <input type="button"  name="remove"  value="-">  </div> </div> </div>'

On your select tag in html call your display function do like this:

    <select  onclick="display(event)" name="kriyakalap[]"  required>

Then set your display function like this:

function display(e){
   let x = e.target.value;
}

And your click listener like this:

$("#add").click(function() {
    if (x <= max) {
        $("#form-field").append(html);
        $('.kriyakalap').last().click(display)
        x  ;
    }
})