如何解决共享HTML和JS代码冲突

Question

	$("#btn-One-time").on( "click", function() {

		$('#don_term_1').click();

		$("#donation-type").val('charge');
		$("#payment_section_cycle").text(' once');

		$('#monthly-options').hide();
		$('#one-time-options').show();

		$('#btn_don').addClass('active');			
		$('#btn_sdn').removeClass('active');

		$('#otherAmountOnetime').removeClass('hidden');		
		$('#otherAmountMonthly').addClass('hidden');

		$('#amount_other').val('');

		clearError(false);
		
	});

	$("#btn-Monthly").on( "click", function() {   	

		$('#don_term_4').click();

		$("#donation-type").val('sub');
		$("#payment_section_cycle").text(' per month');

		$('#one-time-options').hide();
		$('#monthly-options').show();

		$('#btn_don').removeClass('active');
		$('#btn_sdn').addClass('active');

		$('#otherAmountOnetime').addClass('hidden');
		$('#otherAmountMonthly').removeClass('hidden');

		clearError(false);		
		
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="controlled_term_selection_section">

  <div class="row">
    <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2 ">

      <div id="custom_donation_grid">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
            <div>
              <h4>donation:</h4>
            </div>
          </div>
        </div>
        <div class="row">

          <div class="col-xs-12 donation-recurring col-sm-12 col-md-12 col-lg-12 ">
            <button type="button" id="btn_One-time" class="btn btn-lg btn-donation-recurring">One-time</button>
            <button type="button" id="btn_Monthly" class="active btn btn-lg btn-donation-recurring">Monthly</button>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
            <div>&nbsp;<br>
              <h4>donation:</h4>
            </div>
          </div>
        </div>
        <div id="donation-options" class="custom_donation_radios">

          <div id="one-time-options" style="display: none;">
            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_1" value="50">
                <span class="radio_label">
                  <span class="label_text">$50</span>
                </span>
              </label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_2" value="100">
                <span class="radio_label">
                  <span class="label_text">$100</span>
                </span>
              </label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_3" value="250">
                <span class="radio_label">
                  <span class="label_text">$250</span>
                </span>
              </label>
            </div>
          </div>

          <div id="monthly-options">
            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_4" value="10" checked="">
                <span class="radio_label">
                  <span class="label_text">$10</span>
                </span>
              </label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_5" value="15">
                <span class="radio_label">
                  <span class="label_text">$15</span>
                </span>
              </label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" class="amount-total" name="amount" id="don_term_6" value="25">
                <span class="radio_label">
                  <span class="label_text">$25</span>
                </span>
              </label>
            </div>
          </div>

我在网站的一个页面（有一个捐赠页面）中有一个HTML捐赠表单，该页面具有JavaScript处理功能，我从该页面复制了HTML和JavaScript以用于弹出模式表单。用于标题（它适用于网站上的每个页面），因为我希望它看起来像这样。

弹出窗口模式表单功能适用于除捐赠页面之外的所有页面。两种形式之一都不起作用。

我的问题是如何解决共享代码冲突。我不想重命名所有内容以使两种形式都可以工作。

Answer 1

我发现您没有选择正确的元素。 我已经进行了更改

$("#btn-One-time") ----> $("#btn_One-time")

和

$("#btn-Monthly") -----> $("#btn_Monthly")