title: How to show mothly/yearly recurrence date using jquery?
body: <p><a href="https://i.stack.imgur.com/EZWEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZWEi.png" alt="scree capture fields" /></a>I want to set reminders for yearly or monthly basis.</p>
  <p>database table i have these columns</p>
  <pre><code>recu_dt reminder_set_days   period_frequ   recur_every  Active project
  2021-01-01   30               yearly          10         Yes     a
  2021-01-01   30                Monthly         6          Yes    b
  2021-02-09   30               Monthly          3          No     c
  </code></pre>
  <p><strong>expected output</strong></p>
  <pre><code>select from date  select to date
  2021-01-01         2040-12-30
  
  the search result will be
  project name    reminder date
  a                2030-12-02 /*Recur every 10 years from 30days before of  recu_dt 2021-01-01 */
  a                2040-12-02
  b                2021-06-02 /*Recur every 6 months from 30days before of recu_dt 2021-01-01 */
  b                2021-12-02
  b                2022-06-02
  this &quot;b&quot; project will continue up to (selected to date =2040-12-30 including 6 months gap)
  c                2021-04-08
  c                2021-07-08
  this &quot;c&quot; project will continue up to (selected to date =2040-12-30 including 3 months gap)
  </code></pre>
  <p>if the project status is Active=No. The recurrence dates no need to show
  if the project status is Active=Yes. The recurrence  dates need to show</p>
  <p>Json</p>
  <pre><code>[
     {
        &quot;parent&quot;:{
           &quot;project_ID&quot;:&quot;1&quot;,
           &quot;project_title&quot;:&quot;abc&quot;,
           &quot;particulars&quot;:&quot;&quot;,
           &quot;project_amount&quot;:&quot;20000.00&quot;,
           &quot;period_type&quot;:&quot;Yearly&quot;,
           &quot;recurrence_date&quot;:&quot;2021-06-01&quot;,
           &quot;reminder_set_days&quot;:&quot;30&quot;,
           &quot;recur_every&quot;:&quot;10&quot;
        },
        &quot;child&quot;:[
           {
              &quot;recur1&quot;:&quot;02-05-2024&quot;,
              &quot;recur2&quot;:&quot;02-05-2026&quot;,
              &quot;recur3&quot;:&quot;02-05-2028&quot;,
              &quot;recur4&quot;:&quot;02-05-2030&quot;
           }
        ]
     }
     
     {
        &quot;parent&quot;:{
           &quot;project_ID&quot;:&quot;2&quot;,
           &quot;project_title&quot;:&quot;xyz&quot;,
           &quot;particulars&quot;:&quot;&quot;,
           &quot;project_amount&quot;:&quot;1000.00&quot;,
           &quot;period_type&quot;:&quot;Monthly&quot;,
           &quot;recurrence_date&quot;:&quot;01-02-2023 &quot;,
           &quot;reminder_set_days&quot;:&quot;30&quot;,
           &quot;recur_every&quot;:&quot;3&quot;
        },
        &quot;child&quot;:[
           {
              &quot;recur1&quot;:&quot; 02-04-2023&quot;,
              &quot;recur2&quot;:&quot;02-07-2023&quot;,
              &quot;recur3&quot;:&quot;02-10-2023&quot;
           }
        ]
     }
  ]
  </code></pre>
  <p>HTML TABLE TO SHOW REMINDER DATES WITH FROM AND TO DATE</p>
  <pre><code>&lt;div id=&quot;detailsreminder&quot;&gt;
                       &lt;div class=&quot;container-fluid&quot;&gt;
                       
                       &lt;div class=&quot;form-row&quot;&gt;
                                   &lt;div class=&quot;form-group col-md-3&quot;&gt;
                                      &lt;label for=&quot;&quot; class=&quot;col-form-label&quot;&gt;From Date&lt;/label&gt;
                                       &lt;input class=&quot;form-control&quot; id=&quot;fromdate_recu_view&quot; placeholder=&quot;Date&quot; name=&quot;fromdate_recu_view&quot;  type=&quot;text&quot; readonly /&gt;
                                   &lt;/div&gt;
                                   &lt;div class=&quot;form-group col-md-3&quot;&gt;
                                      &lt;label for=&quot;inputZip&quot;&gt;To Date&lt;/label&gt;
                                       &lt;input class=&quot;form-control&quot; id=&quot;todate_recu_view&quot; placeholder=&quot;Date&quot; name=&quot;todate_recu_view&quot;  type=&quot;text&quot; readonly /&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                
                                 &lt;div class=&quot;form-group col-md-3&quot; style=&quot;margin-top: 28px;&quot;&gt;
                                &lt;label for=&quot;&quot;&gt;&lt;/label&gt;
                                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; id=&quot;find_recurrence&quot; class=&quot;find_recurrence&quot;&gt;SEARCH &lt;/button&gt;
                             &lt;/div&gt;
                             
                             
                               
                                &lt;div class=&quot;form-row&quot;&gt;
                                 &lt;div class=&quot;form-group col-md-12&quot;&gt;
                          &lt;section id=&quot;body-contentreminder&quot; class=&quot;continer&quot; style=&quot;padding-top: 12px;&quot;&gt;
                             &lt;div id=&quot;aspnet-placeholder-contentallreminder&quot; style=&quot;padding:0 10px&quot;&gt;
                             
   
                                &lt;div class=&quot;table-responsive&quot;&gt;
                          &lt;table class=&quot;table table-condensed tableinvoicelist_all&quot; id=&quot;tableinvoicelist_all&quot; style=&quot;border-collapse:collapse;&quot;&gt;
                              &lt;thead style=&quot;background-color: darkgray;&quot;&gt;
                                  &lt;tr&gt;
                                      
                                           &lt;th&gt; Project Title&lt;/th&gt;
                                            &lt;th&gt;Recurrence Date&lt;/th&gt;
                                            
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;&lt;/tbody&gt;
                          &lt;/table&gt;
                                &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/section&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
                       &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>