How can I pass the value of variable from one div to another div in the same template?

Question

I'm using a loop to fetch data from model object. I'm trying to pass the same variable i among two different div. I want same i as I need it to get the same object. I'm new to this field and maybe I'm doing something stupid.

Any help will be kindly appreciated.

Here is the snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          {% for i in records %}
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>


                  </td>
               </tr>
            {% endfor %}
              </tbody>
         </table>
         <div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li>{{i.sn}}</li>
                                 <li>{{i.company}}</li>
                                 <li>{{i.address}}</li>
                                 <li>{{i.contact}}</li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span>{{i.sales}}<span></span></th>

                                 </tr>

                                       </tbody>
                           </table>

Answer 1

You can't access inner scope variables outside of loop, what I understand is that you want to show description and some sales data on selected data from your records. if that so, you can use click event. and get the particular that in the passed function and show those data on your respective places. like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-dark">
            <thead>
               <tr>
                  <th scope="col">S.N</th>
                  <th scope="col">Company Name</th>
                  <th scope="col">Trade Ref Date</th>

               </tr>
            </thead>
              <tbody>
          {% for i in records %}
              <tr onclick="somefunction(i)">
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>


                  </td>
               </tr>
            {% endfor %}
              </tbody>
         </table>

Now write function for clickevent

<script>
function somefunction(data){
  document.getElementById("sn").innerHTML = data.sn;
  document.getElementById("company").innerHTML = data.company;
  document.getElementById("addr").innerHTML = data.addr;
  document.getElementById("contact").innerHTML = data.contact;
  document.getElementById("sales").innerHTML = data.sales;
}
</script>

Now the below div will contain your selected record when you click/select the record

<div class="modal fade" id="data1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header">
                     <h3 class="modal-title title" id="exampleModalLabel">Trade Details</h3>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body">
                     <div class="card-body card-block">
                        <div class="displaydata">
                           <div class="description">
                              <ul>
                              <!--I'm not able to get objects variable value in here-->
                                 <li id="sn">#</li>
                                 <li id="company"></li>
                                 <li id="addr"></li>
                                 <li id="contact"></li>
                              </ul>
                           </div>
                           <table class="table table-bordered">
                              <tbody>
                                 <tr>
                                    <th scope="col">Sales </th>
                                    <th scope="row">Purchase</th>
                                 </tr>
                                 <tr>
                                    <th scope="col"><span>Sale/Cancel Sales : </span><span id="sales"></span></th>

                                 </tr>

                                       </tbody>
                           </table>

Answer 2

Your code is wrong, this part of code will be repeated as much as the number of records so you will have many values of i

{% for i in records %}
              <tr>
              <!--I'm getting objects variable value in here-->
                  <th scope="row">1</th>
                  <td>{{i.company}}</td>
                  <td>{{i.address}}</td>
                  <td>{{i.contact}}</td>
                  </td>
               </tr>
            {% endfor %}

but which value of i you want insert below while you have many -^)

<li>{{i.sn}}</li>
<li>{{i.company}}</li>
<li>{{i.address}}</li>
<li>{{i.contact}}</li>